/* Blog magazine treatment for MatchSitters.
   Generated by blog-system/make_magazine.py from this site's own brand colours.
   Scoped to .mag so nothing here can affect the rest of the site. */
.mag {
  --brand: #925E0B;
  --ink: #1A1A2E;
  --wash: #FEFBF4;
  --rule: color-mix(in srgb, var(--ink) 14%, transparent);
  --muted: color-mix(in srgb, var(--ink) 78%, transparent);
  --display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  /* The magazine paints its own surface instead of inheriting the page's. Several of
     these sites have dark backgrounds, and text coloured for a light page vanished on
     them. Owning the surface makes contrast correct on every site. */
  background: var(--wash);
  color: var(--ink);
  max-width: 100%;
  margin: 0;
  padding: 3rem max(1.25rem, calc((100% - 1120px) / 2)) 5rem;
  text-align: left;
}
.mag *, .mag *::before, .mag *::after { box-sizing: border-box; }
/* Several of these sites style headings white for their own dark pages. Without an
   explicit colour here the magazine headline inherits that and disappears against the
   paper surface - MindMakerz measured 1.06:1. */
.mag h1, .mag h2, .mag h3, .mag h4, .mag p, .mag li, .mag blockquote { color: var(--ink); }
.mag .mag-kicker, .mag .mag-meta { color: var(--brand); }

/* ---- masthead ---- */
.mag-masthead { border-bottom: 3px solid var(--ink); padding-bottom: 1rem; margin-bottom: 2.5rem; }
.mag-masthead h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: .95; letter-spacing: -.02em; margin: 0; color: var(--ink);
}
.mag-kicker {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); font-weight: 700; margin: 0 0 .6rem;
}
.mag-masthead p { color: var(--muted); margin: .7rem 0 0; max-width: 60ch; }

/* ---- covers: drawn from the palette, six variants picked per post ---- */
.mag-cover {
  position: relative; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden;
  background: var(--ink); isolation: isolate;
}
.mag-cover::before, .mag-cover::after { content: ""; position: absolute; inset: 0; }
.mag-cover::after { mix-blend-mode: screen; opacity: .9; }
.cv0::before { background: radial-gradient(120% 90% at 18% 15%, var(--brand) 0%, transparent 60%), var(--ink); }
.cv0::after  { background: conic-gradient(from 210deg at 70% 80%, transparent 0deg, var(--brand) 90deg, transparent 180deg); opacity:.45; }
.cv1::before { background: linear-gradient(135deg, var(--ink) 0%, color-mix(in srgb, var(--brand) 55%, var(--ink)) 100%); }
.cv1::after  { background: repeating-linear-gradient(45deg, transparent 0 16px, color-mix(in srgb, var(--brand) 40%, transparent) 16px 18px); opacity:.5; }
.cv2::before { background: var(--ink); }
.cv2::after  { background: radial-gradient(circle at 30% 70%, var(--brand) 0 12%, transparent 12.5%),
                           radial-gradient(circle at 68% 34%, color-mix(in srgb, var(--brand) 60%, var(--wash)) 0 7%, transparent 7.5%),
                           radial-gradient(circle at 85% 72%, color-mix(in srgb, var(--brand) 35%, transparent) 0 18%, transparent 18.5%); opacity:.85; }
.cv3::before { background: linear-gradient(0deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 70%, var(--brand)) 100%); }
.cv3::after  { background: repeating-linear-gradient(90deg, transparent 0 9%, color-mix(in srgb, var(--brand) 55%, transparent) 9% 9.6%); opacity:.55; }
.cv4::before { background: conic-gradient(from 45deg at 50% 50%, var(--ink), color-mix(in srgb, var(--brand) 70%, var(--ink)), var(--ink)); }
.cv4::after  { background: radial-gradient(60% 60% at 50% 50%, transparent 40%, color-mix(in srgb, var(--brand) 45%, transparent) 72%, transparent 74%); }
.cv5::before { background: var(--ink); }
.cv5::after  { background: linear-gradient(115deg, transparent 38%, var(--brand) 38.4% 44%, transparent 44.4%),
                           linear-gradient(115deg, transparent 56%, color-mix(in srgb, var(--brand) 50%, var(--wash)) 56.4% 60%, transparent 60.4%); opacity:.9; }

/* ---- lead story ---- */
.mag-lead { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center; margin-bottom: 3.5rem; }
.mag-lead .mag-cover { aspect-ratio: 4/3; }
.mag-lead h2 { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.04; letter-spacing: -.015em; margin: .5rem 0 .75rem; }
.mag-lead p { font-size: 1.07rem; line-height: 1.65; color: var(--muted); margin: 0 0 1rem; max-width: 46ch; }

/* ---- grid ---- */
.mag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 2.25rem 1.75rem; }
.mag-card h3 { font-family: var(--display); font-size: 1.32rem; line-height: 1.2; margin: .85rem 0 .4rem; letter-spacing: -.01em; }
.mag-card p { font-size: .95rem; line-height: 1.6; color: var(--muted); margin: 0; }
.mag-meta { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); font-weight: 700; }
.mag a { color: inherit; text-decoration: none; display: block; }
.mag a:hover h2, .mag a:hover h3 { text-decoration: underline; text-underline-offset: 3px; }

/* Depth on hover. Disabled for anyone who asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .mag-cover { transform: perspective(900px) rotateX(0) rotateY(0) translateZ(0); transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s; }
  .mag a:hover .mag-cover { transform: perspective(900px) rotateX(2.2deg) rotateY(-3.2deg) translateY(-5px); box-shadow: 0 22px 45px -18px color-mix(in srgb, var(--ink) 65%, transparent); }
}

/* ---- article ---- */
.mag-article { max-width: 44rem; margin: 0 auto; }
.mag-article .mag-cover { aspect-ratio: 21/9; margin-bottom: 2.25rem; }
.mag-article h1 { font-family: var(--display); font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.02; letter-spacing: -.02em; margin: .4rem 0 .9rem; }
.mag-article .mag-standfirst { font-size: 1.2rem; line-height: 1.55; color: var(--muted); margin: 0 0 1.5rem; }
.mag-article .mag-byline { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .7rem 0; margin-bottom: 2.25rem; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mag-body { font-size: 1.09rem; line-height: 1.75; }
.mag-body p { margin: 0 0 1.35em; }
.mag-body > p:first-of-type::first-letter {
  font-family: var(--display); float: left; font-size: 3.6em; line-height: .82;
  padding: .06em .09em 0 0; color: var(--brand);
}
.mag-body h2 { font-family: var(--display); font-size: 1.85rem; line-height: 1.15; margin: 2.4em 0 .5em; letter-spacing: -.01em; }
.mag-body h3 { font-family: var(--display); font-size: 1.32rem; margin: 2em 0 .45em; }
.mag-body ul, .mag-body ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.mag-body li { margin-bottom: .5em; }
.mag-body blockquote { border-left: 3px solid var(--brand); margin: 2em 0; padding: .2em 0 .2em 1.3em; font-family: var(--display); font-size: 1.3rem; line-height: 1.4; color: var(--ink); }
.mag-body a { display: inline; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand); text-underline-offset: 2px; }
.mag-body hr { border: 0; border-top: 1px solid var(--rule); margin: 2.6em 0; }
.mag-body code { background: color-mix(in srgb, var(--ink) 8%, transparent); padding: .12em .35em; border-radius: 4px; font-size: .9em; }
.mag-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.6em 0; }
.mag-back { display: inline-block; margin-top: 3rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); font-weight: 700; }

@media (max-width: 820px) {
  .mag-lead { grid-template-columns: 1fr; gap: 1.25rem; }
  .mag { padding: 2rem 1.1rem 3.5rem; }
  .mag-body > p:first-of-type::first-letter { font-size: 3em; }
}