/* Magazine layout for blog posts and case studies.
   Loaded after each page's own <style>, by tools/magazine_pass.py, so the
   rules here win without !important. Page markup it styles:
   .mag-cover, .mag-pull, .mag-more, plus the existing post and cs classes. */

/* One edge for everything. Hero text, cover and cards all line up on the
   same 1280px frame instead of the hero hugging the window edge. */
.post-hero, .cs-hero {
  padding-left: max(56px, calc((100% - 1280px) / 2));
  padding-right: max(56px, calc((100% - 1280px) / 2));
  padding-bottom: 150px;
}
.post-breadcrumb, .cs-breadcrumb {
  padding-left: max(56px, calc((100% - 1280px) / 2));
  padding-right: max(56px, calc((100% - 1280px) / 2));
}
.post-h1 { font-size: clamp(2.8rem, 6.4vw, 6rem); line-height: .92; max-width: 1100px; }
.post-dek, .cs-dek { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.6; max-width: 760px; }

/* ── Cover ─────────────────────────────────────────────────────────── */
.mag-cover {
  position: relative;
  z-index: 3;
  width: min(1280px, 100% - 112px);
  margin: -110px auto 0;
}
.mag-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 14px;
  background: var(--ink);
  box-shadow: 0 30px 60px -24px rgba(23, 19, 16, .45), 0 2px 0 rgba(23, 19, 16, .06);
}

/* ── Reading column ────────────────────────────────────────────────── */
/* shared.css scopes these as "body .post-body", so match that weight. */
body .post-body, body .cs-body {
  max-width: 820px;
  padding-top: 72px;
  font-size: 1.16rem;
  line-height: 1.8;
}
body .post-body p, body .post-body li, body .cs-body p, body .cs-body li { color: var(--ink-800); }
body .post-body p:not(.lead), body .cs-body p:not(.lead) { font-size: 1.16rem; line-height: 1.8; }
body .post-body h2, body .cs-body h2 {
  padding-left: 0;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1;
  margin-top: 64px;
  padding-top: 22px;
  position: relative;
}
body .post-body h2::before, body .cs-body h2::before {
  content: "";
  bottom: auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 4px;
  background: var(--orange);
}

/* Drop cap on the opening paragraph. */
.post-body > p.lead:first-of-type::first-letter,
.cs-body > p.lead:first-of-type::first-letter {
  float: left;
  font-family: var(--font-head);
  font-size: 5.4em;
  line-height: .78;
  margin: .06em .1em 0 0;
  color: var(--orange-strong);
}
@supports (initial-letter: 3) {
  .post-body > p.lead:first-of-type::first-letter,
  .cs-body > p.lead:first-of-type::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0 .12em 0 0;
    initial-letter: 3;
  }
}

/* ── Pull quote ────────────────────────────────────────────────────── */
.mag-pull {
  margin: 64px 0;
  padding: 22px 0 30px;
  border-top: 3px solid var(--ink-900);
  border-bottom: 1px solid var(--border-strong);
  position: relative;
}
.mag-pull::before {
  content: "\201C";
  display: block;
  height: .36em;
  margin-bottom: 14px;
  font-family: var(--font-head);
  font-size: 6rem;
  line-height: .72;
  color: var(--orange);
}
body .post-body blockquote.mag-pull p, body .cs-body blockquote.mag-pull p {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.04;
  letter-spacing: .01em;
  color: var(--ink-900);
  text-wrap: balance;
}
@media (min-width: 1180px) {
  .mag-pull { margin-left: -90px; margin-right: -90px; }
}

/* Callouts read as sidebars, not boxes. */
.post-callout {
  border: 0;
  border-left: 4px solid var(--orange);
  background: var(--dark);
  border-radius: 0 12px 12px 0;
}

/* ── Keep reading ──────────────────────────────────────────────────── */
.mag-more {
  background: var(--dark);
  border-top: 1px solid var(--border);
  padding: 88px 56px 96px;
}
.mag-more-in { max-width: 1280px; margin: 0 auto; }
.mag-more-h {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  margin: 0 0 36px;
}
.mag-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.mag-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink-900);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mag-card:hover, .mag-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: 0 22px 40px -22px rgba(23, 19, 16, .4);
}
.mag-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--ink);
}
.mag-card-k {
  margin: 20px 22px 6px;
  font-family: var(--font-sub);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.mag-card-t {
  margin: 0 22px;
  font-family: var(--font-sub);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}
.mag-card-go {
  margin: auto 22px 22px;
  padding-top: 18px;
  font-family: var(--font-sub);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

@media (prefers-reduced-motion: reduce) {
  .mag-card { transition: none; }
  .mag-card:hover { transform: none; }
}

/* ── Tablet and phone ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .mag-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .post-hero, .cs-hero { padding-left: 24px; padding-right: 24px; padding-bottom: 96px; }
  .post-breadcrumb, .cs-breadcrumb { padding-left: 24px; padding-right: 24px; }
  .mag-cover { width: calc(100% - 32px); margin-top: -64px; }
  .mag-cover img { border-radius: 10px; }
  body .post-body, body .cs-body { padding-top: 48px; }
  body .post-body p:not(.lead), body .cs-body p:not(.lead) { font-size: 1.08rem; }
  .mag-pull { margin: 48px 0; }
  .mag-pull::before { font-size: 4.6rem; }
  body .post-body blockquote.mag-pull p, body .cs-body blockquote.mag-pull p { font-size: 1.9rem; }
  .mag-more { padding: 64px 16px 72px; }
  .mag-cards { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Cover caption, progress bar, share row ────────────────────────── */
.mag-cap {
  max-width: 760px;
  margin: 12px auto 0;
  padding-left: 12px;
  border-left: 3px solid var(--orange);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-600);
}
.mag-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000; pointer-events: none; }
.mag-progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--orange), var(--purple-deep)); }
.mag-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 48px 0 8px; padding-top: 22px; border-top: 1px solid var(--border); }
.mag-share-l { font-weight: 800; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); margin-right: 4px; }
body .mag-share .mag-share-b { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--ink-800); font: inherit; font-size: .92rem; font-weight: 700; text-decoration: none; cursor: pointer; }
body .mag-share .mag-share-b:hover, body .mag-share .mag-share-b:focus-visible { border-color: var(--orange); color: var(--orange-deep); }
@media (max-width: 640px) { .mag-cap { margin-inline: 16px; } }

/* ── The client's site on a tablet and a phone ─────────────────────── */
.mag-devices { margin: 56px 0; }
.mag-devices img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: var(--dark);
  border: 1px solid var(--border);
}
body .mag-devices figcaption {
  margin-top: 12px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink-500);
  text-align: center;
}
@media (min-width: 1180px) {
  .mag-devices { margin-left: -90px; margin-right: -90px; }
}