/* ===========================================================================
   The Good Leadership Book

   Editorial direction, approved 2026-09-06. See DESIGN.md, which is the source
   of truth for every decision in this file.

   Colour carries meaning here. Each Dimension colour identifies a Dimension and
   each Virtue colour a Virtue, so these hex values are content, not decoration.
   The brand is a reading brand: white and cream only, never dark mode.

   Two rules in here are load bearing and were the most frequently raised
   problems during review, so do not undo them casually:
     1. .wrap owns ALL horizontal padding. Nothing else sets its own, which is
        why every left and right edge lines up down the page.
     2. Body prose has no width cap. Text and images end on the same line. The
        one exception is the hero intro, where the wheel occupies the right.
   =========================================================================== */

@font-face { font-family: "GaramondBrand"; src: url("/assets/fonts/Garamond-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "GaramondBrand"; src: url("/assets/fonts/Garamond-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "GaramondBrand"; src: url("/assets/fonts/Garamond-Italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* The sticky header's own height, so anchor landings can clear it.
     75px at desktop, 66px when the nav collapses; the larger value is
     used at both, which only means a little more air on a phone. */
  --header-h: 75px;

  /* Brand */
  --purple: #562583;
  --lilac: #D8C7E3;
  --ink: #4F5051;
  --warm: #8C8189;
  --page: #FFFFFF;
  --cream: #FBF8F4;
  --line: #EDE5F2;

  /* The four Dimensions */
  --dim-understanding: #1F497D;
  --dim-ethics: #000000;
  --dim-purpose: #F8C309;
  /* Text-safe Purpose. #F8C309 on white is 1.64:1 and fails WCAG AA. Same hue,
     darkened to 4.36:1. Decorative uses keep the true brand yellow. */
  --dim-purpose-text: #907104;
  --dim-communication: #C00000;

  /* The six Virtues. Just and Spiritual fail as text (2.70:1 and 1.28:1), so
     they carry a text-safe variant used for headings only. Rules and dots
     always keep the true brand colour. */
  --virtue-prudent: #31849B;
  --virtue-wise: #007E39;
  --virtue-social: #973D96;
  --virtue-just: #E57979;
  --virtue-just-text: #D73030;
  --virtue-spiritual: #FFDB58;
  --virtue-spiritual-text: #8D6E00;
  --virtue-courageous: #E0700A;

  /* Space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 96px;

  /* Shape and motion */
  --radius-card: 0px;
  --radius-button: 0px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --wrap: 1180px;
  --pad: clamp(22px, 5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "GaramondBrand", Garamond, Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--purple); }

/* ONE wrap. Header, every section and the footer use it; nothing sets its own
   horizontal padding. This is what makes the edges line up. */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.ui, nav, button, .btn, .meta, .pill { font-family: "Montserrat", system-ui, -apple-system, sans-serif; }
.meta {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--warm);
}

/* --- Typography ---------------------------------------------------------- */
h1, h2, h3 {
  font-family: "GaramondBrand", Georgia, serif;
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--purple); max-width: 16ch; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); letter-spacing: -0.01em; color: var(--purple); margin-top: var(--s6); }
/* A heading that opens a section already has the section's own padding above
   it, so the extra top margin there would double the gap. */
.section > .wrap > h2:first-child, .wrap > div > h2:first-child, .hero h1 { margin-top: 0; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

/* No reading-measure cap: prose ends on the same line as the images. */
.measure { max-width: none; }
.lede { font-size: 1.2rem; }
.answer, .answer-short {
  border-left: 3px solid var(--lilac);
  padding-left: var(--s5);
  font-size: 1.1rem;
  margin-bottom: var(--s4);
}
.breadcrumb { font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--warm); margin-bottom: var(--s5); }
.breadcrumb a { text-decoration: none; color: var(--warm); }

/* --- Skip link and reduced motion ---------------------------------------- */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--s4); top: var(--s4); background: #fff; padding: var(--s3); z-index: 10; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Header -------------------------------------------------------------
   Purple bar with white type. Tried as a white bar during the 2026-09-06
   redesign and reverted at Aamer's request: he preferred the original. */
/* Every in-page link landed with its heading underneath the sticky header,
   because the browser scrolls the target to the very top of the viewport and
   the header is painted over it. scroll-padding-top on the scrolling element
   fixes all of them at once, including anchors that do not exist yet, which is
   why this is here rather than a scroll-margin on each target. */
html { scroll-padding-top: calc(var(--header-h) + 22px); }

.site-header { background: var(--purple); border-bottom: none; position: sticky; top: 0; z-index: 5; }
.header-inner { display: flex; align-items: center; gap: var(--s5); padding-block: var(--s4); }
.brand {
  display: flex; align-items: center; gap: 11px;
  font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 13.5px;
  color: #fff; text-decoration: none; margin-right: auto;
}
.brand img { width: 34px; height: 34px; }
.site-header nav { display: flex; align-items: center; gap: var(--s5); }
.site-header nav a { font-family: "Montserrat", sans-serif; font-size: 12.5px; text-decoration: none; color: #fff; transition: color 160ms var(--ease); }
.site-header nav a:hover { color: var(--lilac); }
/* The buy button lives inside <nav>, so `.site-header nav a` (0,2,1) beats
   `.btn` (0,1,0) and would otherwise take the nav's own colour. Restate the
   button's colours at matching specificity. On the purple bar it inverts:
   white fill, purple label. */
.site-header nav a.btn { background: #fff; color: var(--purple); }
.site-header nav a.btn:hover { background: var(--lilac); color: var(--purple); }
.nav-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,0.45); color: #fff; padding: 8px 14px; margin-left: auto; cursor: pointer; font-size: 12px; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: "Montserrat", sans-serif; font-size: 12.5px; letter-spacing: 0.05em;
  text-decoration: none; color: #fff; background: var(--purple);
  padding: 12px 22px; border: 0; cursor: pointer;
  transition: transform 180ms var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--purple); color: #fff; }
.btn--ghost { background: none; color: var(--purple); border-bottom: 2px solid var(--purple); padding: 0 0 3px; }
.btn--ghost:hover { transform: none; opacity: 0.7; }

/* --- Hero, the poster ---------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(52px, 8vh, 92px) clamp(58px, 9vh, 104px); }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(3rem, 9vw, 7.6rem); line-height: 0.95; max-width: 13ch; margin-bottom: 0; }
.hero h1 em { font-style: italic; }
/* The wheel is the ground the type sits on, not an image beside it. At 0.18 it
   never competes with the headline. */
.hero-mark { position: absolute; right: -13vw; top: -9vh; width: 68vw; max-width: 940px; opacity: 0.18; z-index: 0; pointer-events: none; }
.hero .lede { margin: clamp(24px, 4vh, 44px) 0 0; max-width: 44ch; }
.hero-cta { margin-top: var(--s6); display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }

/* --- Sections ------------------------------------------------------------ */
.section { padding-block: clamp(38px, 4.4vh, 58px); }
.section--cream { background: var(--cream); border-block: 1px solid var(--line); }

.two { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.two > img, .two > picture { width: 100%; justify-self: end; }
.two > picture { display: block; }
.two > picture img { width: 100%; }
/* The model-position artwork ships on a white ground; multiply lets the cream
   show through it rather than showing a white box on a cream section. */
.two > img.on-ground, .two > picture img.on-ground { mix-blend-mode: multiply; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: start; }

/* --- The book ------------------------------------------------------------ */
/* "Take a look inside the book" runs its heading and its one sentence at full
   width, then puts the cover and the buy CTA on a row beneath. The section
   used to be a two-column split with the text in the left column; once the
   repetition was merged away, one sentence in a half-width column read as a
   thin strip of text next to a large image. */
/* Back-cover endorsements. Set in the body face, italic, against a rule in
   the Dimension purple, so they read as someone else's voice without becoming
   a decorated pull-quote. The attribution is the only place on the page where
   a name outranks the words, so it is not italic. */
.praise { margin: var(--s5) 0; display: grid; gap: var(--s4); }
.praise-quote { margin: 0; padding: 0 0 0 var(--s4); border-left: 3px solid var(--lilac); }
.praise-quote p { font-style: italic; margin-bottom: var(--s2); }
.praise-quote cite {
  font-style: normal; display: block; color: var(--purple);
}
.praise-quote cite .meta { display: block; color: var(--warm); text-transform: none; letter-spacing: 0; }

.book-row { display: flex; align-items: center; gap: var(--s6); margin-top: var(--s5); flex-wrap: wrap; }
/* The text column takes the space, the cover takes what it needs, and the text
   sits centred against the cover. The cover is 420px tall and the copy is
   about 200px, so SOME white space is unavoidable until this section has more
   to say; centred, it falls either side and reads as breathing room instead of
   as a hole under the button. Bottom alignment stranded the CTA at the foot of
   the cover, top alignment dropped the whole gap beneath it. */
.book-buy { flex: 1 1 420px; }
.book-buy p:last-child { margin-bottom: 0; }
.book-block { width: min(280px, 100%); margin-left: auto; }
/* The cover ends on the content edge, like every other image on the site. */
.book-row .book-block { margin-left: auto; flex: none; }
.book-cover { display: block; transition: transform 200ms var(--ease); }
.book-cover:hover { transform: translateY(-3px); }
.book-cover img { display: block; box-shadow: 0 12px 34px rgba(86, 37, 131, 0.16); }
.look-inside {
  display: block; text-align: center; margin-top: var(--s3);
  font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--purple); text-decoration: none;
}

/* --- Character cards ----------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 20px); margin-top: var(--s5); }
/* Three Domains in a four-column grid left a column of dead space, so the row
   stopped short of the right edge while everything above and below it ran the
   full width. Three columns fill the measure and the boxes get wider, which is
   what makes the left and right edges line up down the whole page. */
.cards--three { grid-template-columns: repeat(3, 1fr); }
/* The model page leads with its title and the 3D model, not with a flat
   picture of the wheel. The wheel is now a mark beside the title: it says what
   the page is at a glance, and the interactive version directly beneath it is
   the one worth looking at. Its labels are illegible at this size on purpose,
   they are not the job any more. */
.page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); align-items: center; }
.page-head > div > :last-child { margin-bottom: 0; }
/* 380px, not 260. Giving the wheel more room takes it back from a favicon
   to something readable, AND shortens the lede's line length, which reads
   better than the full-width measure it had beside the smaller mark. */
.wheel { width: 380px; max-width: 100%; height: auto; display: block; }
.card {
  background: var(--page); border: 1px solid var(--line); border-top: 3px solid var(--lilac);
  padding: 22px 20px 18px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(86, 37, 131, 0.10); }
/* The head art is 303x360. Never force a square; height follows the width. */
.card img, .icon-head { width: 96px; height: auto; margin-bottom: 2px; }
.card h3 { font-size: 1.3rem; color: var(--purple); margin: 0; }
.card .motto { font-style: italic; margin: 0; font-size: 1rem; }
.card .pill, .card .dom {
  font-family: "Montserrat", sans-serif; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--warm);
}
.card .pill { margin-top: auto; padding-top: var(--s3); display: flex; align-items: center; gap: 7px; }
.card .dom { margin-top: var(--s1); }
.pill .dot, .card .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }

.siblings { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 20px); margin-top: var(--s5); }

/* --- Virtues ------------------------------------------------------------- */
.virtues { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px, 5vw, 60px); margin-top: var(--s5); }
/* .virtue-row, NOT .virtue. The Virtues page already uses `card card--dim
   virtue` on its full sections, and a grid rule named .virtue placed their
   headings and alternate paragraphs into a 3px column. */
.virtue-row { display: grid; grid-template-columns: 3px 1fr; gap: 18px; padding-block: var(--s4); border-bottom: 1px solid var(--line); margin: 0; }
.virtue-row .nm { font-size: 1.2rem; color: var(--purple); }
.virtue { margin-bottom: var(--s6); }
.virtue h2 { margin-top: 0; }
.vblock { border-top: 3px solid var(--lilac); padding-top: 18px; margin-bottom: var(--s7); }
.vblock h2 { margin-bottom: var(--s1); }
.vblock .spec { margin: 0 0 var(--s3); }

/* --- Model page: Dimensions and the Domain index ------------------------- */
.dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 20px); margin-top: var(--s5); }
.dim { border-top: 3px solid var(--lilac); padding-top: var(--s4); }
.dim h3 { margin-bottom: var(--s1); }
.dim .q { font-style: italic; font-size: 1rem; margin: 0; }
.dimension-title { margin-top: 0; margin-bottom: var(--s4); }

.domain { margin-bottom: var(--s7); }
.domain h3 { font-size: 1.5rem; font-style: italic; color: var(--purple); margin: 0 0 var(--s3); padding-bottom: 9px; border-bottom: 1px solid var(--lilac); }
.entry { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: var(--s3); align-items: baseline; padding-block: 9px; text-decoration: none; color: inherit; }
.entry:hover .enm { color: var(--purple); }
.entry .dot { width: 9px; height: 9px; border-radius: 50%; transform: translateY(-2px); }
.entry .enm { font-size: 1.2rem; white-space: nowrap; transition: color 160ms var(--ease); }
.entry .dots { border-bottom: 1px dotted var(--lilac); transform: translateY(-5px); }
.entry .emt { font-style: italic; white-space: nowrap; font-size: 1rem; }
.entry .edim { white-space: nowrap; }

/* --- Character page ------------------------------------------------------ */
.char-head { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: center; }
.char-head img, .icon-hero { width: 128px; height: auto; }
.char-head h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; margin-bottom: var(--s2); max-width: none; }
.char-head .motto { font-style: italic; font-size: 1.4rem; margin: 0 0 var(--s3); }
.pills { display: flex; flex-wrap: wrap; gap: var(--s3); }
.pillbox {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--line); padding: 7px 13px;
  font-family: "Montserrat", sans-serif; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink);
}
.pillbox .dot { width: 8px; height: 8px; border-radius: 50%; }

/* --- Authors ------------------------------------------------------------- */
.authors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); margin-top: var(--s5); }
.author img, .author-photo { width: 92px; height: 92px; border-radius: 50%; margin-bottom: var(--s3); }
.author h3 { font-size: 1.35rem; color: var(--purple); margin-bottom: var(--s1); }
.author .role { display: block; margin-bottom: var(--s3); }
.more {
  font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--purple); text-decoration: none;
  border-bottom: 1px solid var(--lilac); padding-bottom: 2px;
}
/* The rest of each biography, one tap away. <details> is native: keyboard
   accessible, works with JavaScript blocked, and leaves the full text in the
   HTML where a crawler still reads it. */
.bio { margin-top: var(--s4); }
.bio summary { cursor: pointer; display: inline-block; list-style: none; }
.bio summary::-webkit-details-marker { display: none; }
.bio summary::after { content: " +"; }
.bio[open] summary::after { content: " 3"; }
.bio[open] summary { margin-bottom: var(--s4); }
.bio p { margin-bottom: var(--s4); }

/* --- Common questions ---------------------------------------------------- */
/* Folded, so the page reads as a list of questions rather than a wall of
   prose. Native <details>: no JavaScript, works with it off, same device as
   the author biographies. The plus is drawn from two bars rather than set as a
   glyph, so it cannot be a stray dash character and it can rotate into a
   minus. */
.qa { border-bottom: 1px solid var(--line); margin: 0; }
.qa summary {
  cursor: pointer; list-style: none; position: relative;
  padding: var(--s4) 44px var(--s4) 0;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: 1.35rem; color: var(--purple); margin: 0; }
.qa summary:hover h3 { color: var(--ink); }
.qa summary:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.qa summary::before, .qa summary::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  width: 15px; height: 2px; background: var(--purple); border-radius: 1px;
}
.qa summary::before { transform: translateY(-50%); }
.qa summary::after {
  transform: translateY(-50%) rotate(90deg);
  transition: transform 200ms var(--ease);
}
.qa[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.qa-body { padding-bottom: var(--s4); }
.qa-body p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .qa summary::after { transition: none; }
}

/* The model page runs long, and three of its headings were reading as one
   continuous list. A little air before "Joining up", and a rule plus more air
   before the questions, which are a different kind of content and should look
   it. */
.hub-break { margin-top: var(--s7); }
#questions {
  margin-top: var(--s8); padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

/* The 3D model sits directly under the page head, whose 380px wheel already
   supplies the air. A full section's top padding on top of that left a band of
   nothing between the title and the thing the page is about. */
#the-model-in-3d { padding-top: 0; }
/* And no heading margin either. The page head is already 380px tall because
   of the wheel, so the lede finishes well above it and any further gap here
   reads as a band of nothing between the title and the thing the page is
   about. */
#the-model-in-3d > h2 { margin-top: 0; }

/* --- The 3D model embedded in its card -----------------------------------
   The iframe is lazy: a WebGL app should not load for a visitor who never
   scrolls this far, and it must not compete with the page's own paint. */
.embed-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--lilac);
  overflow: hidden;
  background: var(--cream);
  margin-block: var(--s4) var(--s5);
  --embed-w: 1000px;
  --embed-scale: 1;
}
/* The 3D app lays itself out for a full viewport, so at card width its labels
   collide. Render it at desktop size and scale the whole thing down. site.js
   sets the factor from the real container width; without JavaScript the iframe
   simply fills the frame, which still works, just more crowded. */
.embed-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; }
.embed-frame.is-scaled iframe {
  width: var(--embed-w);
  height: calc(var(--embed-w) * 9 / 16);
  transform: scale(var(--embed-scale));
  transform-origin: top left;
}

/* --- Click to load the interactive video ---------------------------------
   Nothing third-party loads until someone presses play. This is a privacy
   decision: the vendor's iframe carries a Meta pixel that a CSP here cannot
   reach. Do not turn this back into an autoloading embed. */
.video-facade {
  display: block; position: relative; width: 100%; padding: 0; cursor: pointer;
  font: inherit; color: var(--purple); background: var(--cream);
  border: 1px solid var(--lilac); overflow: hidden;
  transition: transform 200ms var(--ease);
}
.video-facade:hover, .video-facade:focus-visible { transform: translateY(-2px); }
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-facade-play {
  width: 84px; height: 84px; border-radius: 50%; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.86); flex: none;
  box-shadow: 0 6px 24px rgba(86, 37, 131, 0.28);
  transition: background 200ms var(--ease);
}
.video-facade:hover .video-facade-play { background: #fff; }
.video-facade-play::after {
  content: "";
  position: absolute; top: 50%; left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent var(--purple);
}
/* The label stays in the DOM for screen readers and for anyone whose poster
   fails to load, but sighted users get the play button on the artwork. */
.video-facade-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff; background: rgba(86, 37, 131, 0.82);
  padding: 9px 12px;
}

/* --- Selected social posts ------------------------------------------------
   Click to load, like the video. Cards are a fixed 4:5 with object-fit:cover
   so a portrait photo and a reel cover of different aspect ratios still make
   one even row, rather than one card standing taller than its neighbour. */
.social-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s5); margin-bottom: var(--s6);
}
/* A Character with only one post must not leave a half-width card stranded
   beside dead space. One post gets a single column capped at the width the
   card would have had, so it reads as a deliberate single rather than as a
   row that failed to fill. */
.social-grid:has(> .social-post:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
/* The gathered layout on the Virtues page holds every post at once, so it
   sizes to the count rather than always being two across: three posts make
   one clean row instead of a row of two and an orphan. */
.social-grid--gathered { grid-template-columns: repeat(3, 1fr); }
.social-post { margin: 0; }
.social-facade {
  display: block; position: relative; width: 100%; padding: 0; cursor: pointer;
  font: inherit; color: var(--purple); background: var(--cream);
  border: 1px solid var(--line); overflow: hidden;
  transition: transform 200ms var(--ease);
}
.social-facade:hover, .social-facade:focus-visible { transform: translateY(-2px); }
.social-facade picture { display: block; }
/* contain, NOT cover. These posts are mostly designed graphics with the
   subject's name and goodleadership.org set into the artwork, and cropping to
   a uniform box sliced the words in half ("olly Parton", "ODLEADERSHIP.ORG").
   A uniform 4:5 box with the whole image inside it keeps every row even AND
   keeps the artwork readable. The letterboxing sits on the section's own
   ground so it reads as a frame rather than as a gap. */
.social-facade img {
  width: 100%; aspect-ratio: 4 / 5; height: auto;
  object-fit: contain; display: block; background: var(--cream);
}
.section--cream .social-facade img { background: var(--page); }
.social-facade-badge {
  position: absolute; top: 0; left: 0;
  font-family: "Montserrat", sans-serif; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; background: rgba(86, 37, 131, 0.86);
  padding: 7px 11px;
}
.social-post blockquote {
  margin: var(--s3) 0 var(--s2); padding: 0;
  border-left: 3px solid var(--character, var(--purple)); padding-left: var(--s3);
  font-style: italic;
}
.social-embed {
  width: 100%; border: 1px solid var(--line); background: #fff;
  min-height: 640px; display: block;
}

/* --- A Virtue block paired with its post ---------------------------------
   The "beside" layout. Virtue card left, post right, tops aligned so the two
   read as one unit rather than as a card with something bolted under it. A
   Virtue with no post keeps the full width, so the page keeps an even rhythm
   instead of showing a hole where a post would go. */
.virtue-pair {
  /* Not 1fr 1fr. The Virtue text is short and a 4:5 post is tall, so equal
     columns left a deep well of white under every Virtue card. Giving the
     post the narrower column makes it shorter and brings the two closer to
     the same height, which is what makes them read as one unit. */
  display: grid; grid-template-columns: 1.3fr 0.7fr;
  gap: var(--s5); align-items: start; margin-bottom: var(--s6);
}
.virtue-pair > .virtue { margin-bottom: 0; }
.virtue-pair .social-grid { margin-bottom: 0; }

/* --- A Virtue block with both its posts ----------------------------------
   The "trio" layout: wording, post, post, one row per Virtue. The wording
   column is widest because it carries the most text, and all three stretch to
   a common height so the row reads as one unit. */
.virtue-trio {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s5); align-items: stretch; margin-bottom: var(--s6);
}
.virtue-trio > .virtue { margin-bottom: 0; }
.virtue-trio > .social-post { margin: 0; }

/* --- The closing buy card ------------------------------------------------
   Every page ends on one, and it had no spacing rule of its own: it took
   whatever the element above happened to leave it. On the model page that was
   nothing, because the last folded question ends on a border, so the card sat
   flush against it. One rule, so the closing CTA gets the same air on every
   page rather than depending on what precedes it. Adjacent margins collapse,
   so pages that already left 32px land on 48px too. */
.cta { margin-top: var(--s7); }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--cream); border-top: 1px solid var(--line); padding-block: clamp(38px, 6vh, 64px); }
.site-footer p { margin-bottom: var(--s2); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards--three { grid-template-columns: repeat(2, 1fr); }
  .virtue-trio { grid-template-columns: 1fr 1fr; }
  .virtue-trio > .virtue { grid-column: 1 / -1; }
  .social-grid--gathered { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) { .dims { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .two { grid-template-columns: 1fr; }
  .page-head { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .page-head .wheel { width: 200px; }
  .social-grid { grid-template-columns: 1fr; }
  .virtue-pair { grid-template-columns: 1fr; }
  .social-grid--gathered { grid-template-columns: 1fr; }
  .virtue-trio { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .site-header nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--s4); padding: var(--s4) 0; }
  .site-header nav.is-open { display: flex; }
  .header-inner { flex-wrap: wrap; }
}
@media (max-width: 820px) { .pair, .authors { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .book-block { margin-inline: auto; } }
@media (max-width: 780px) {
  .entry { grid-template-columns: auto 1fr; row-gap: 2px; }
  .entry .dots { display: none; }
  .entry .emt, .entry .edim { grid-column: 2; white-space: normal; }
}
@media (max-width: 760px) { .siblings { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .virtues { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .char-head { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dims { grid-template-columns: 1fr; } }