/* ═══════════════════════════════════════════════════════════════
   BLUECORE — SUBPAGE SKIN (blog posts, about, index, legal, 404)
   ---------------------------------------------------------------
   Maps the existing subpage markup onto the Operations Console
   system in /assets/bluecore.css. Load bluecore.css first.
   ═══════════════════════════════════════════════════════════════ */

body{
  background:var(--paper);color:var(--graphite);
  --rule:var(--rule-paper);--edge:var(--edge-paper);
}

/* ── Navigation (legacy <nav> markup) ──────────────────────── */
nav{
  position:sticky;top:0;z-index:120;height:var(--nav-h);
  background:rgba(244,245,248,.9);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--edge-paper);
  display:flex;align-items:center;
}
nav .nav-inner{
  width:min(100% - var(--pad)*2, 900px);margin-inline:auto;
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
nav img{height:28px;width:auto}
.nav-links{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-links a{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);
  transition:color .2s;
}
.nav-links a:hover{color:var(--headline)}
.nav-book{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--blue);color:#fff;padding:11px 17px;border-radius:var(--r);
  box-shadow:3px 3px 0 rgba(0,82,255,.3);
  transition:background .2s,box-shadow .2s,transform .2s cubic-bezier(.22,1,.36,1);
}
.nav-book:hover{background:var(--blue-lift);transform:translate(-2px,-2px);box-shadow:5px 5px 0 rgba(0,82,255,.34)}
/* .nav-links a would otherwise win on specificity and paint this
   button's label graphite-on-blue, i.e. invisible. */
.nav-links a.nav-book,.nav-links a.nav-book:hover{color:#fff}
.nav-links a.nav-book::after{display:none}
@media(max-width:640px){ .nav-links a.hide-m{display:none} .nav-book{font-size:10.5px;padding:10px 13px} }

/* Legacy gradient-text spans: retire the gradient, keep the emphasis */
.grad-text{
  background:none !important;
  -webkit-text-fill-color:var(--blue) !important;
  color:var(--blue) !important;
  font-style:normal !important;
}

/* ── Article body ──────────────────────────────────────────── */
article{
  width:min(100% - var(--pad)*2, 760px);margin-inline:auto;
  padding-block:76px 64px;
}
article .meta,.head .eyebrow,.meta{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--blue);
  margin-bottom:20px;display:flex;align-items:center;gap:11px;
}
article .meta::before,.head .eyebrow::before{
  content:'';width:22px;height:1px;background:currentColor;flex-shrink:0;
}
h1{
  font-family:var(--display);font-weight:800;font-stretch:110%;
  font-size:clamp(31px,4.8vw,52px);line-height:1;letter-spacing:-.034em;
  color:var(--headline);margin-bottom:22px;text-wrap:balance;
}
.standfirst{
  font-size:20px;line-height:1.58;color:var(--graphite);
  margin-bottom:30px;max-width:60ch;
}
.byline{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate-dim);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:30px;border-bottom:1px solid var(--edge-paper);margin-bottom:44px;
}
.byline b{color:var(--headline);font-weight:600}
.byline a{color:var(--headline);border-bottom:1px solid var(--edge-paper)}
.byline a:hover{border-bottom-color:var(--blue)}

article h2{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(23px,2.5vw,30px);line-height:1.1;letter-spacing:-.024em;
  color:var(--headline);margin:56px 0 16px;text-wrap:balance;
}
article h3{
  font-family:var(--display);font-weight:700;font-stretch:100%;
  font-size:19.5px;line-height:1.22;letter-spacing:-.014em;
  color:var(--headline);margin:36px 0 12px;
}
article p{font-size:17.5px;line-height:1.72;margin-bottom:20px}
article p strong{color:var(--headline);font-weight:600}
article a{color:var(--blue);font-weight:500;border-bottom:1px solid rgba(0,82,255,.28)}
article a:hover{border-bottom-color:var(--blue)}

article ul,article ol{
  margin:0 0 22px;display:flex;flex-direction:column;gap:11px;
  font-size:17.5px;line-height:1.7;
}
article ul li{list-style:none;padding-left:26px;position:relative}
article ul li::before{
  content:'';position:absolute;left:2px;top:.62em;width:9px;height:1px;background:var(--blue);
}
article ol{counter-reset:o;list-style:none}
article ol li{padding-left:36px;position:relative;counter-increment:o}
article ol li::before{
  content:counter(o,decimal-leading-zero);position:absolute;left:0;top:.2em;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--blue);
}

/* ── Article furniture ─────────────────────────────────────── */
.callout,.box,.quick{
  background:#fff;border:1px solid var(--edge-paper);border-left:2px solid var(--blue);
  border-radius:var(--r);padding:24px 26px;margin:32px 0;
}
.callout p:last-child,.box p:last-child,.quick p:last-child{margin-bottom:0}
.callout p+p,.box p+p{margin-top:12px}

.stat{
  background:var(--ink);color:var(--slate);border-radius:var(--r);
  padding:30px 30px 26px;margin:36px 0;
}
.stat .big{
  display:block;font-family:var(--display);font-weight:800;font-stretch:106%;
  font-size:clamp(24px,3vw,32px);line-height:1.06;letter-spacing:-.028em;
  color:#fff;margin-bottom:14px;
}
.stat p{margin-bottom:0;font-size:16px;color:var(--slate)}
.stat cite{
  display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-ink);
  font-family:var(--mono);font-size:11.5px;font-style:normal;letter-spacing:.07em;
  color:var(--slate-dim);
}
.stat cite a{color:#5A90FF;border-bottom-color:rgba(90,144,255,.4)}

.code{
  font-family:var(--mono);font-size:14px;background:var(--ink);color:#B9C4DA;
  border-radius:var(--r);padding:20px 22px;margin:0 0 24px;overflow-x:auto;
}

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 28px}
table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:440px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--edge-paper);vertical-align:top}
th{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate-dim);border-bottom-color:var(--edge-paper);
}
td{font-variant-numeric:tabular-nums}

.about-photo{
  border:1px solid var(--edge-paper);border-radius:var(--r);overflow:hidden;
  margin:0 0 12px;position:relative;
}
.about-photo img{display:block;width:100%;height:auto}
.photo-caption{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate-dim);margin:0 0 34px !important;
}

.social-links{display:flex;gap:10px;margin:6px 0 14px;flex-wrap:wrap}
.social-links a{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--headline);
  border:1px solid var(--edge-paper);border-bottom:1px solid var(--edge-paper);
  border-radius:var(--r);padding:11px 17px;transition:all .2s;
}
.social-links a:hover{border-color:var(--blue);color:var(--blue)}

/* ── Related links ─────────────────────────────────────────── */
.related{
  width:min(100% - var(--pad)*2, 760px);margin-inline:auto;padding-bottom:76px;
}
.related h2{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:24px;letter-spacing:-.022em;color:var(--headline);
  margin-bottom:6px;
}
.related-list{
  list-style:none;display:flex;flex-direction:column;
  border-top:1px solid var(--edge-paper);margin-top:22px;
}
.related-list li{
  padding:22px 0;border-bottom:1px solid var(--edge-paper);
  transition:padding-left .3s cubic-bezier(.22,1,.36,1);position:relative;
}
.related-list li::before{
  content:'';position:absolute;left:0;top:34px;transform:scaleX(0);transform-origin:left;
  width:20px;height:1px;background:var(--blue);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.related-list li:hover{padding-left:34px}
.related-list li:hover::before{transform:scaleX(1)}
.related-list a{
  font-family:var(--display);font-weight:700;font-stretch:102%;
  font-size:18.5px;line-height:1.24;letter-spacing:-.016em;
  color:var(--headline);border-bottom:0;
}
.related-list li:hover a{color:var(--blue)}
.related-list span{
  display:block;font-family:var(--body);font-size:15.5px;font-weight:400;
  line-height:1.55;color:var(--graphite);margin-top:8px;letter-spacing:0;
}

/* ── Blog index ────────────────────────────────────────────── */
.head{
  width:min(100% - var(--pad)*2, 900px);margin-inline:auto;
  padding-block:80px 44px;
}
.head h1{max-width:18ch}
.head p{font-size:19px;line-height:1.6;color:var(--graphite);max-width:62ch;margin-top:20px}
.list{
  width:min(100% - var(--pad)*2, 900px);margin-inline:auto;
  padding-bottom:80px;display:flex;flex-direction:column;
  border-top:1px solid var(--edge-paper);
}
.card{
  display:block;padding:32px 0;border-bottom:1px solid var(--edge-paper);
  transition:padding-left .3s cubic-bezier(.22,1,.36,1);position:relative;
}
.card::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleX(0);
  transform-origin:left;width:20px;height:1px;background:var(--blue);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.card:hover{padding-left:34px}
.card:hover::before{transform:translateY(-50%) scaleX(1)}
.card .meta{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate-dim);margin-bottom:11px;
  display:flex;align-items:center;gap:0;
}
.card .meta::before{display:none}
.card h2{
  font-family:var(--display);font-weight:700;font-stretch:104%;
  font-size:clamp(20px,2.2vw,26px);line-height:1.16;letter-spacing:-.024em;
  color:var(--headline);margin:0 0 10px;text-wrap:balance;
}
.card:hover h2{color:var(--blue)}
.card p{font-size:16px;line-height:1.6;color:var(--graphite);margin:0 0 12px;max-width:70ch}
.card .more{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);
}

/* ── Tail CTA ──────────────────────────────────────────────── */
.cta{
  background:var(--ink);border-top:1px solid var(--edge-ink);
  padding:80px var(--pad);text-align:left;color:var(--slate);
}
.cta > *{width:min(100%, 900px);margin-inline:auto}
/* The rule above hands every child a 900px width. The heading and paragraph
   escape it via their own max-width, but the button has none, so it stretched
   to the full column with its label stuck at the left. Shrink it back to its
   content and make it block-level so the auto margins can centre it. */
.cta > .btn{display:flex;width:fit-content;max-width:100%;justify-content:center}
.cta .alt{text-align:center}
.cta h2{
  font-family:var(--display);font-weight:800;font-stretch:108%;
  font-size:clamp(27px,3.8vw,44px);line-height:1.02;letter-spacing:-.032em;
  color:#fff;margin-bottom:16px;max-width:20ch;
}
.cta p{font-size:17px;line-height:1.62;color:var(--slate);margin-bottom:30px;max-width:56ch}
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--blue);color:#fff;padding:17px 26px;border-radius:var(--r);
  box-shadow:5px 5px 0 rgba(0,82,255,.3);border-bottom:0;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,background .2s;
}
.btn:hover{background:var(--blue-lift);transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(0,82,255,.34)}
.cta .alt{
  display:block;margin-top:22px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate-dim);
}
.cta .alt a{color:var(--slate);border-bottom:1px solid var(--rule-ink)}
.cta .alt a:hover{color:#fff;border-bottom-color:var(--slate)}

/* ── Footer ────────────────────────────────────────────────── */
footer{
  background:var(--ink);border-top:1px solid var(--rule-ink);
  padding:34px var(--pad);color:var(--slate-dim);
}
footer p{
  width:min(100%,900px);margin-inline:auto;
  font-family:var(--mono);font-size:11.5px;line-height:2;
  letter-spacing:.07em;text-transform:uppercase;
}
footer a{color:var(--slate);font-weight:400;border-bottom:0}
footer a:hover{color:#fff}

@media(max-width:560px){
  article{padding-block:52px 48px}
  article p,article ul,article ol{font-size:16.5px}
  .standfirst{font-size:18px}
  .head{padding-block:52px 32px}
  .head p{font-size:17px}
  .list,.related{padding-bottom:56px}
  .cta{padding:60px var(--pad)}
}