/* ===========================================================================
   The Good Leadership Book
   Tokens and styling, from the published Good Leadership Book Design System.

   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.
   =========================================================================== */

:root {
  /* Brand */
  --purple: #562583;
  --lilac: #D8C7E3;
  --ink: #4F5051;
  --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 (needs
     4.5:1). Same hue and saturation, darkened to 4.62:1. Decorative uses
     (icons, borders, dots) keep the true brand yellow. */
  --dim-purpose-text: #907104;
  --dim-communication: #C00000;

  /* The six Virtues */
  --virtue-prudent: #31849B;
  --virtue-wise: #007E39;
  --virtue-social: #973D96;
  --virtue-just: #E57979;
  --virtue-spiritual: #FFDB58;
  --virtue-courageous: #E0700A;

  /* Shape and motion */
  --radius-card: 16px;
  --radius-button: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 24px -8px rgba(86, 37, 131, 0.15);
  --shadow-lift: 0 8px 32px -8px rgba(86, 37, 131, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

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

  --wrap: 1120px;
}

/* --- Self-hosted brand fonts -------------------------------------------- */
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Bold.woff2") format("woff2"); font-weight: 700; 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: "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: "Raleway"; src: url("/assets/fonts/Raleway-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("/assets/fonts/Raleway-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("/assets/fonts/Raleway-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

h1, h2, h3, h4 {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  color: var(--purple);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 var(--s4);
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-top: 0; }
h3 { font-size: 1.25rem; margin-top: 0; }

/* Prose fills the column it sits in: the CONTAINER owns the width, not the
   paragraph. A paragraph carrying its own narrower max-width inside a wider
   container leaves a ragged right edge against every heading, card grid and
   image beside it, which reads as a broken layout rather than as a reading
   measure. Long-form prose gets its measure from a narrower container
   instead, the way .character does. */
p { margin: 0 0 var(--s5); }
a { color: var(--purple); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.ui, nav, button, .btn, .eyebrow, .pill, footer {
  font-family: "Raleway", system-ui, -apple-system, sans-serif;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s5); }
/* padding-block only. Using the shorthand here re-declared left and right
   padding as 0 and wiped .wrap's, so any element carrying both classes lost
   its gutters. Invisible on desktop where max-width left margins; on a phone
   the text ran to the screen edge. */
.section { padding-block: var(--s7); }
.section--cream { background: var(--cream); }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--purple);
  margin-bottom: var(--s3);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
}
.btn--primary { background: var(--purple); color: #fff; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--primary:active { transform: scale(0.96); transition-duration: 80ms; }
.btn--ghost { border: 1px solid var(--lilac); color: var(--purple); background: transparent; }
.btn--ghost:hover { background: var(--cream); }

/* --- Cards --------------------------------------------------------------- */
.card {
  background: var(--page);
  border: 1px solid var(--lilac);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--s5);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.card--dim { border-top: 4px solid var(--lilac); }
.card--understanding { border-top-color: var(--dim-understanding); }
.card--ethics        { border-top-color: var(--dim-ethics); }
.card--purpose       { border-top-color: var(--dim-purpose); }
.card--communication { border-top-color: var(--dim-communication); }

.grid { display: grid; gap: var(--s5); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* --- Motto --------------------------------------------------------------- */
.motto {
  font-family: "GaramondBrand", Georgia, serif;
  font-style: italic;
  font-size: 1.35rem;
  color: var(--purple);
  margin: var(--s4) 0 var(--s5);
}

/* --- Pills --------------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--lilac);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}
.pill .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* --- Media --------------------------------------------------------------- */
img { max-width: 100%; height: auto; display: block; }
.icon-head { width: 96px; height: auto; }
.embed { position: relative; width: 100%; border: 0; border-radius: var(--radius-card); }

/* --- Accessibility ------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.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) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- Header and navigation ---------------------------------------------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--page); position: sticky; top: 0; z-index: 5; }
.header-inner { display: flex; align-items: center; gap: var(--s5); padding-top: var(--s4); padding-bottom: var(--s4); }
.brand { display: flex; align-items: center; gap: var(--s3); font-family: "Montserrat", sans-serif; font-weight: 700; color: var(--purple); text-decoration: none; font-size: 0.95rem; }
.site-header nav { margin-left: auto; display: flex; align-items: center; gap: var(--s5); font-size: 0.9rem; }
.site-header nav a { text-decoration: none; color: var(--ink); }
.site-header nav a:hover { color: var(--purple); }
.nav-toggle { display: none; background: none; border: 1px solid var(--lilac); border-radius: var(--radius-button); padding: 8px 14px; margin-left: auto; cursor: pointer; }

/* --- Layout blocks ------------------------------------------------------- */
.hero { padding-block-start: var(--s7); }
.hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--s7); align-items: center; }
.hero-inner img { width: 100%; max-width: 520px; margin-inline: auto; }
/* The labelled wheel at 900px overwhelmed the page and pushed the first
   section below the fold. */
.wheel { width: 100%; max-width: 720px; margin-inline: auto; }
.two-col { display: grid; grid-template-columns: 360px 1fr; gap: var(--s8); align-items: start; }
.lede { font-size: 1.2rem; }
.meta { font-size: 0.82rem; color: #6b6c6e; }
.breadcrumb { font-size: 0.82rem; margin-bottom: var(--s5); color: #6b6c6e; }
.breadcrumb a { text-decoration: none; }

/* --- Character pages and cards ------------------------------------------ */
.character-card { text-decoration: none; color: inherit; display: block; }
.character-card h3 { margin: var(--s3) 0 var(--s2); font-size: 1.05rem; }
.character-card .motto { font-size: 1rem; margin: 0 0 var(--s3); }
.icon-hero { width: 180px; height: auto; margin: var(--s5) 0; }
.character .positioning { font-size: 1.05rem; }
.cta { background: var(--cream); margin-top: var(--s8); }
.cta h2 { margin-top: 0; }
.virtue { margin-bottom: var(--s6); }
.virtue h2 { margin-top: 0; }
.site-footer { padding: var(--s7) 0; margin-top: var(--s9); border-top: 1px solid var(--line); font-size: 0.9rem; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .hero-inner, .two-col { grid-template-columns: 1fr; gap: var(--s5); }
  .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; }
  h2 { margin-top: var(--s7); }
}

/* --- Header: purple bar, white text (Aamer, 2026-09-04) ------------------ */
.site-header { background: var(--purple); border-bottom: none; }
.brand, .site-header nav a, .nav-toggle { color: #fff; }
.site-header nav a:hover { color: var(--lilac); }
.nav-toggle { border-color: rgba(255, 255, 255, 0.4); }
.site-header .btn--primary { background: #fff; color: var(--purple); }
.site-header .btn--primary:hover { background: var(--lilac); }

/* --- The Book: cover and Biblet side by side ----------------------------- */
.book-media { display: grid; gap: var(--s5); }
.biblet { min-height: 460px; border: 1px solid var(--lilac); }

/* --- Two equal columns for Trees and Contact ----------------------------- */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }

/* --- Character pages take their Dimension's colour ----------------------- */
.character h2 { color: var(--character, var(--purple)); }
.character .cta h2 { color: var(--purple); }

/* --- Boxes fill their column rather than leaving dead space to the right - */
.cta { max-width: none; }
.character { max-width: 820px; }

@media (max-width: 860px) {
  .two-up { grid-template-columns: 1fr; gap: var(--s5); }
}

/* --- Author portraits ---------------------------------------------------- */
.author { text-align: left; }
.author-photo { width: 140px; height: 140px; border-radius: 50%; margin-bottom: var(--s4); }
.author h3 { margin-top: 0; }
.trees-photo { border-radius: var(--radius-card); margin-bottom: var(--s5); }

/* --- Dimension question sits on its own line ----------------------------- */
.question { display: block; margin-top: var(--s2); font-style: italic; font-weight: 700; }

/* Character pages need gutters at every width. */
.character { max-width: 820px; }

/* --- Consistent breathing room around every image and embed --------------
   Previously each image set its own margin, so the gap between a picture and
   the text or button below it varied section by section. One rule instead. */
picture, .biblet, .trees-photo, .icon-hero, article > img, .wrap > img {
  margin-block: var(--s6) var(--s7);
}
.author-photo, .icon-head { margin-block: 0 var(--s4); }
.book-media { margin-block: var(--s6) var(--s7); }
.biblet { display: block; width: 100%; }

/* --- Look inside: the cover links out to the Biblet ----------------------
   Linking rather than embedding means no third-party cookies load before a
   visitor has chosen to open the preview. */
.look-inside {
  display: inline-block;
  position: relative;
  text-decoration: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
  max-width: 360px;
}
.look-inside:hover, .look-inside:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.look-inside picture { margin: 0; display: block; }
.look-inside-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--s4);
  background: linear-gradient(to top, rgba(86, 37, 131, 0.92), rgba(86, 37, 131, 0));
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
}
.look-inside-label::after { content: " \2192"; }

/* --- Vertical rhythm -----------------------------------------------------
   Headings take a top margin only when they follow content, never when they
   open a section. A blanket h2 margin-top stacked on the section's own padding
   and produced roughly 216px of empty space between every section. */
p + h2, ul + h2, ol + h2, div + h2, section + h2, .grid + h2, article + h2 {
  margin-top: var(--s7);
}
.eyebrow + h2 { margin-top: 0; }
p + h3, ul + h3, div + h3, .grid + h3 { margin-top: var(--s6); }
.card h3, .card h2 { margin-top: 0; }

/* --- Prompt above the clickable cover ------------------------------------ */
.prompt { color: var(--purple); font-weight: 700; margin-bottom: var(--s3); }

/* --- Dimension cards ------------------------------------------------------
   The title takes its Dimension's colour, the same way Character pages do, and
   sits clear of the symbol above it. */
.dimension-icon { margin-block: 0 var(--s5); width: 72px; height: auto; }
.dimension-title { margin-top: 0; margin-bottom: var(--s4); }

/* --- The opening answer ---------------------------------------------------
   A self-contained definition in the first 30% of the page, which is where
   roughly 44% of AI citations are drawn from. */
.answer {
  font-size: 1.15rem;
  line-height: 1.5;
  padding: var(--s5);
  border-left: 4px solid var(--character, var(--purple));
  background: var(--cream);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  margin-block: var(--s5) var(--s6);
}

/* --- Question and answer blocks ------------------------------------------
   A direct answer of 40 to 60 words under a question-shaped heading, which is
   both how people type a search and what an assistant lifts as a citation. */
.qa { margin-block: var(--s6); }
.qa h3 { margin-bottom: var(--s3); }
.answer-short {
  font-size: 1.08rem;
  border-left: 3px solid var(--lilac);
  padding-left: var(--s4);
  margin-bottom: var(--s4);
}

/* --- The 3D model embedded in its card -----------------------------------
   The video card beside it shows a player, so a card holding only a button
   read as an empty box. Same 16:9 frame as the video, so the pair matches.
   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);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--cream);
  margin-block: var(--s4) var(--s5);
}
/* 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, which
   gives a clean miniature rather than a squashed one. 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 { --embed-w: 1000px; --embed-scale: 1; }
.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 ---------------------------------
   A facade that matches the 3D frame beside it, so the pair still reads as a
   pair, but nothing third-party loads until someone presses play. */
.video-facade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: var(--purple);
  background: var(--cream);
  border: 1px solid var(--lilac);
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.video-facade:hover, .video-facade:focus-visible {
  background: #fff;
  transform: translateY(-2px);
}
.video-facade-play {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--purple);
  position: relative;
  flex: none;
}
.video-facade-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.video-facade-label { font-weight: 600; font-size: 0.95rem; }

/* --- The Twelve Characters table -----------------------------------------
   The site's subject is a three by four grid and every other rendering of it
   is cards and headings, which asks the reader to rebuild the relationship in
   their head. The table states it once.

   .table-scroll owns the horizontal overflow so the table can keep four
   readable columns on a narrow screen without the page body scrolling
   sideways, which is the usual way a table breaks a layout. */
.table-scroll {
  overflow-x: auto;
  margin-block: var(--s5);
  border: 1px solid var(--lilac);
  border-radius: var(--radius-card);
  background: var(--page);
}
.model-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}
.model-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--s4) var(--s4) var(--s3);
  color: var(--ink);
  font-size: 0.9rem;
}
.model-table th,
.model-table td {
  text-align: left;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  vertical-align: top;
  white-space: nowrap;
}
.model-table thead th {
  border-top: 0;
  border-bottom: 2px solid var(--lilac);
  color: var(--purple);
  font-weight: 700;
}
.model-table tbody th { font-weight: 700; }
.model-table tbody tr:hover { background: var(--cream); }
.model-table .motto {
  font-style: italic;
  color: var(--ink);
  white-space: normal;
}