/* Layout and components. Every value comes from theme.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-charcoal);
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-purple); text-underline-offset: 3px; }
a:hover { color: var(--c-purple-deep); }
::selection { background: var(--c-purple-tint); color: var(--c-black); }

.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 760px) { .wrap { padding: 0 var(--s-4); } }

.kicker {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--c-purple);
}
.kicker::before { content: ""; width: var(--s-4); height: var(--rule-accent); background: currentColor; }
h2 {
  margin: 0 0 var(--s-3);
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-2xl); line-height: var(--lh-head);
  letter-spacing: var(--tracking-head); color: var(--c-black);
}

/* Masthead */
.masthead { position: sticky; top: 0; z-index: 10; background: var(--c-black); border-bottom: var(--rule) solid var(--c-line-dark); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-top: var(--s-2); padding-bottom: var(--s-2); }
.masthead .logo img { height: var(--logo-h); width: auto; }
.nav { display: none; gap: var(--s-4); }
.nav a {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--c-on-dark); text-decoration: none;
}
.nav a:hover { color: var(--c-purple-light); }
@media (min-width: 860px) { .nav { display: flex; } }
.btn {
  display: inline-block; padding: 0.8rem 1.4rem; border-radius: var(--radius);
  background: var(--c-black); color: var(--c-on-dark);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; text-decoration: none;
}
.btn:hover { background: var(--c-purple); color: var(--c-on-dark); }
.btn-accent { background: var(--c-purple); }
.btn-accent:hover { background: var(--c-purple-light); color: var(--c-black); }

/* Hero */
.hero { background: var(--c-paper); color: var(--c-black); overflow: hidden; border-bottom: var(--rule) solid var(--c-line); }
.hero .wrap { display: grid; gap: var(--s-4); align-items: center; padding-top: var(--s-6); padding-bottom: var(--s-6); }
@media (min-width: 960px) { .hero .wrap { grid-template-columns: 1.35fr 1fr; } }
.hero h1 {
  margin: 0;
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-hero); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-head);
}
.hero h1 em { font-style: italic; color: var(--c-purple); }
.hero .lede { margin: var(--s-3) 0 var(--s-4); max-width: var(--text-w); font-size: var(--t-lg); color: var(--c-grey); }
.hero-art { justify-self: center; width: var(--mascot-w); }

/* Stats strip */
.stats { background: var(--c-paper-2); color: var(--c-black); border-bottom: var(--rule) solid var(--c-line); }
.stats ul { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .stats ul { grid-template-columns: repeat(4, 1fr); } }
.stats li { padding: var(--s-4) var(--s-2); border-left: var(--rule) solid var(--c-line); }
.stats li:first-child, .stats li:nth-child(3) { border-left: 0; }
@media (min-width: 860px) { .stats li:nth-child(3) { border-left: var(--rule) solid var(--c-line); } }
.stat-num { display: block; font-family: var(--f-display); font-size: var(--t-stat); line-height: 1; color: var(--c-black); }
.stat-label { display: block; margin-top: var(--s-1); font-size: var(--t-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-grey); }

/* Sections */
.section { padding: var(--s-6) 0; }
.section-alt { background: var(--c-paper-2); }
.split { display: grid; gap: var(--s-3); }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.5fr; gap: var(--s-5); } }
.prose p { margin: 0 0 var(--s-3); max-width: var(--text-w); color: var(--c-grey); }
.prose p:last-child { margin-bottom: 0; }
.prose .first::first-letter {
  float: left; margin: 0.06em 0.1em 0 0;
  font-family: var(--f-display); font-size: var(--t-dropcap); line-height: 0.8; color: var(--c-purple);
}
.prose strong { color: var(--c-black); font-weight: 600; }

/* Publishing pillars */
.pillars { display: grid; margin-top: var(--s-5); border-top: var(--rule) solid var(--c-line); }
@media (min-width: 760px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar { padding: var(--s-4) var(--s-3) var(--s-4) 0; border-bottom: var(--rule) solid var(--c-line); }
@media (min-width: 760px) { .pillar { padding-left: var(--s-3); border-left: var(--rule) solid var(--c-line); } }
.pillar-num { display: block; margin-bottom: var(--s-3); font-family: var(--f-display); font-style: italic; font-size: var(--t-lg); color: var(--c-purple); }
.pillar h3 { margin: 0 0 var(--s-1); font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); color: var(--c-black); }
.pillar p { margin: 0; font-size: var(--t-sm); color: var(--c-grey); }

/* Principles */
.principles { margin: 0; padding: 0; list-style: none; counter-reset: p; }
.principles li { position: relative; padding: var(--s-3) 0 var(--s-3) var(--s-5); border-top: var(--rule) solid var(--c-line); counter-increment: p; }
.principles li::before {
  content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: var(--s-3);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--tracking-caps); color: var(--c-purple);
}
.principles h3 { margin: 0 0 0.25rem; font-family: var(--f-display); font-weight: 600; font-size: var(--t-lg); color: var(--c-black); }
.principles p { margin: 0; color: var(--c-grey); font-size: var(--t-sm); }

/* Pull quote band */
.band { background: var(--c-purple-tint); color: var(--c-black); }
.band .wrap { display: grid; gap: var(--s-4); align-items: center; }
@media (min-width: 900px) { .band .wrap { grid-template-columns: 1.4fr 1fr; } }
.band blockquote {
  margin: 0; padding-left: var(--s-3); border-left: var(--rule-accent) solid var(--c-purple);
  font-family: var(--f-display); font-style: italic; font-size: var(--t-xl); line-height: var(--lh-head);
}
.band .prose p { color: var(--c-grey); }

/* Team */
.team-grid { display: grid; gap: var(--s-5); align-items: start; margin-top: var(--s-4); }
@media (min-width: 860px) { .team-grid { grid-template-columns: auto 1fr; gap: var(--s-6); } }
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--avatar-cell), 1fr)); gap: var(--s-4) var(--s-3); margin: 0; padding: 0; list-style: none; }
.member { display: flex; flex-direction: column; align-items: center; text-align: center; }
.avatar {
  display: grid; place-items: center; overflow: hidden;
  width: var(--avatar); height: var(--avatar); border-radius: 50%;
  background: var(--c-black); border: var(--avatar-border) solid var(--c-purple);
}
.avatar-lead { width: var(--avatar-lead); height: var(--avatar-lead); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initials { font-family: var(--f-display); font-size: var(--t-xl); color: var(--c-on-dark); }
.member-name { margin-top: var(--s-2); font-family: var(--f-display); font-weight: 600; font-size: var(--t-md); line-height: var(--lh-head); color: var(--c-black); }
.member-lead .member-name { font-size: var(--t-lg); }
.member-role { margin-top: 0.25rem; font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-purple); }
.team-note { margin: var(--s-5) 0 0; font-size: var(--t-sm); color: var(--c-grey); }

/* Newsletter + contact */
.cta { background: var(--c-purple); color: var(--c-on-dark); }
.cta .wrap { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .cta .wrap { grid-template-columns: 1fr 1fr; align-items: end; } }
.cta h2 { color: var(--c-on-dark); }
.cta p { margin: 0 0 var(--s-3); max-width: var(--text-w); color: var(--c-purple-tint); }
.cta .kicker { color: var(--c-on-dark); }
.cta-mail { font-family: var(--f-display); font-size: var(--t-xl); color: var(--c-on-dark); text-decoration-thickness: 2px; word-break: break-word; }
.cta-mail:hover { color: var(--c-purple-tint); }

/* Footer */
.foot { background: var(--c-black); color: var(--c-on-dark-soft); font-size: var(--t-xs); }
.foot .wrap { display: grid; gap: var(--s-3); padding-top: var(--s-5); padding-bottom: var(--s-4); }
@media (min-width: 760px) { .foot .wrap { grid-template-columns: 1fr auto; align-items: end; } }
.foot .logo img { height: var(--logo-h-foot); width: auto; }
.foot-meta { display: flex; flex-direction: column; gap: 0.25rem; }
@media (min-width: 760px) { .foot-meta { text-align: right; } }