/* Shivamber redesign design system — brand tokens, Source fonts, homepage sections.
   Loaded site-wide by mu-plugins/shivamber-redesign.php. Class prefix: svr-  */

:root{
  --svr-ink:#0A0C10;
  --svr-blue:#247AB0;
  --svr-blue-light:#9CD9F0;
  --svr-paper:#F7F5F0;
  --svr-cream:#f1ede6;
  --svr-slate:#33424A;
  --svr-text:#15181C;
  --svr-muted:#5F666D;
  --svr-line:#e9e5dd;
  --svr-serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --svr-sans:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- Global brand type (book + model + sites standardized on Source) ---- */
body,
button, input, select, optgroup, textarea,
.entry-content, .site-content{
  font-family: var(--svr-sans) !important;
}
h1,h2,h3,h4,h5,h6,
.entry-title, .site-title,
.svr-serif{
  font-family: var(--svr-serif) !important;
}

/* ---- Header width matches content width PER PAGE so the logo always aligns ----
   Homepage content is full-bleed/wide, so widen the header only there; content
   pages keep the narrow container they already had (and already aligned with).  */
body.home .inside-header.grid-container{ max-width:1120px; padding-left:28px; padding-right:28px; }

/* Homepage sections are full-bleed. GeneratePress "one-container" adds
   .one-container .site-content{padding:40px}, which leaves a white band above the
   footer (and a gap under the header). The hero supplies its own spacing, so zero it. */
body.home #content.site-content{ padding:0 !important; }
body.home .inside-article,
body.home .entry-content{ padding:0 !important; margin:0 !important; }
body.home .entry-content > *:last-child{ margin-bottom:0 !important; }

/* ================= Homepage ================= */
.svr-inner{ max-width:1120px; margin:0 auto; padding-left:28px; padding-right:28px; }

/* Hero */
.svr-hero{ background:var(--svr-ink); padding:108px 0 92px; position:relative; overflow:hidden; }
.svr-hero__motif{ position:absolute; top:0; right:0; bottom:0; width:52%; z-index:1; pointer-events:none; }
.svr-hero__svg{ width:100%; height:100%; display:block; }
.svr-hero .svr-inner{ position:relative; z-index:2; }
@media (max-width:782px){ .svr-hero__motif{ display:none; } }
.svr-eyebrow{ font-family:var(--svr-sans); font-size:13px; font-weight:500; letter-spacing:2.5px; color:var(--svr-blue-light); margin:0 0 18px; }
.svr-hero h1.svr-h1{ font-family:var(--svr-serif); color:#fff; font-weight:500; font-size:58px; line-height:1.1; letter-spacing:-0.6px; max-width:900px; margin:0 0 24px; }
.svr-lede{ color:#c2c8cf; font-size:18px; line-height:1.6; max-width:560px; margin:0 0 30px; border-left:3px solid var(--svr-blue); padding-left:22px; }
.svr-cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:28px; }
.svr-btn{ display:inline-block; font-family:var(--svr-sans); font-size:15px; font-weight:500; letter-spacing:.3px; padding:13px 26px; border-radius:4px; text-decoration:none; transition:all .15s ease; }
.svr-btn--primary{ background:var(--svr-blue-light); color:var(--svr-ink) !important; }
.svr-btn--primary:hover{ background:#b6e4f6; color:var(--svr-ink) !important; }
.svr-btn--ghost{ color:#fff !important; border:1px solid rgba(255,255,255,.6); }
.svr-btn--ghost:visited{ color:#fff !important; }
.svr-btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); color:#fff; }
.svr-trust{ font-size:13.5px; color:#6b727a; border-top:1px solid rgba(255,255,255,.08); padding-top:18px; max-width:760px; margin:0; }

/* Book launch band */
.svr-bookband{ background:var(--svr-blue); }
.svr-bookband .svr-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:20px; padding-bottom:20px; }
.svr-bookband__eyebrow{ font-size:12px; font-weight:500; letter-spacing:1.5px; color:#cfeaf6; margin:0 0 5px; }
.svr-bookband__title{ font-family:var(--svr-serif); font-weight:600; color:#fff; font-size:21px; margin:0; }
.svr-bookband__cta{ display:inline-block; font-size:14px; font-weight:600; color:var(--svr-blue); background:#fff; padding:11px 22px; border-radius:4px; text-decoration:none; white-space:nowrap; }
.svr-bookband__cta:hover{ background:var(--svr-cream); color:var(--svr-blue); }

/* Section scaffold */
.svr-sec{ padding:54px 0 46px; background:#fff; }
.svr-sec__head{ text-align:center; margin-bottom:30px; }
.svr-sec__title{ font-family:var(--svr-serif); font-weight:600; font-size:30px; color:var(--svr-text); margin:0 0 8px; }
.svr-sec__dek{ font-size:16px; color:var(--svr-muted); margin:0; }

/* Homepage data exhibit (rigor made visible: a real, on-brand chart) */
.svr-exhibit{ background:#fff; padding:56px 0; }
.svr-exhibit__inner{ max-width:880px; margin:0 auto; }
.svr-exhibit__cta{ margin:22px 0 0; }
.svr-exhibit__cta a{ font-size:14.5px; font-weight:500; color:var(--svr-blue); text-decoration:none; }
.svr-exhibit__cta a:hover{ color:var(--svr-ink); }
.svr-exhibit__cta a::after{ content:" \2192"; }

/* About the author band (credibility / authority signal) */
.svr-about{ background:var(--svr-cream); padding:54px 0; border-top:1px solid var(--svr-line); border-bottom:1px solid var(--svr-line); }
.svr-about .svr-inner{ display:flex; gap:46px; align-items:center; justify-content:center; flex-wrap:wrap; }
.svr-about__photo{ flex:0 0 300px; max-width:300px; }
.svr-about__photo img{ width:300px; height:344px; object-fit:cover; object-position:center 14%; display:block; border-radius:10px; }
.svr-about__body{ flex:0 1 540px; }
.svr-about__name{ font-family:var(--svr-serif); font-weight:600; font-size:30px; color:var(--svr-text); margin:0 0 4px; }
.svr-about__role{ font-size:15px; color:var(--svr-blue); font-weight:500; margin:0 0 16px; }
.svr-about__bio{ font-size:16.5px; line-height:1.65; color:#3a4047; margin:0 0 20px; max-width:620px; }
.svr-about__proof{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.svr-about__proof span{ font-size:12.5px; color:var(--svr-blue); background:rgba(36,122,176,0.09); border:1px solid rgba(36,122,176,0.18); padding:6px 12px; border-radius:4px; white-space:nowrap; }
.svr-about__link{ font-size:14.5px; font-weight:500; color:var(--svr-blue); text-decoration:none; }
.svr-about__link:hover{ color:var(--svr-ink); }
.svr-about__link::after{ content:" \2192"; }
@media (max-width:600px){ .svr-about__photo{ flex-basis:180px; max-width:180px; } }

/* Featured essays */
.svr-essays{ display:grid; grid-template-columns:repeat(auto-fit, minmax(248px,1fr)); gap:22px; }
.svr-essay{ display:flex; flex-direction:column; border:1px solid var(--svr-line); border-radius:8px; overflow:hidden; text-decoration:none; background:#fff; transition:transform .15s ease, box-shadow .15s ease; }
.svr-essay:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(10,12,16,.10); }
.svr-essay__thumb{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.svr-essay__tile{ display:flex; align-items:center; aspect-ratio:16/10; padding:22px 20px; background:var(--svr-ink); }
.svr-essay__tile span{ font-family:var(--svr-serif); font-weight:500; color:#fff; font-size:21px; line-height:1.22; }
.svr-essay__body{ padding:16px 18px 20px; }
.svr-essay__meta{ font-size:11.5px; letter-spacing:.4px; color:var(--svr-blue); font-weight:500; margin:0 0 6px; }
.svr-essay__excerpt{ font-size:14.5px; color:var(--svr-muted); line-height:1.5; margin:0; }
.svr-essays__all{ text-align:center; margin:30px 0 0; }
.svr-essays__all a{ font-size:14.5px; font-weight:500; color:var(--svr-blue); text-decoration:none; }
.svr-essays__all a:hover{ color:var(--svr-ink); }
.svr-essays__all a::after{ content:" \2192"; }

/* Explore the analysis */
.svr-explore{ background:var(--svr-paper); padding:54px 0; border-top:1px solid var(--svr-line); border-bottom:1px solid var(--svr-line); }
.svr-explore__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:20px; }
.svr-xcard{ display:block; background:#fff; border:1px solid var(--svr-line); border-left:3px solid var(--svr-blue); padding:22px 22px; text-decoration:none; }
.svr-xcard:hover{ background:#fff; box-shadow:0 6px 20px rgba(10,12,16,.07); }
.svr-xcard__icon{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:9px; background:rgba(36,122,176,0.09); margin-bottom:14px; }
.svr-xcard__icon svg{ width:23px; height:23px; }
.svr-xcard__title{ font-family:var(--svr-serif); font-weight:600; font-size:19px; color:var(--svr-text); margin:0 0 8px; }
.svr-xcard__text{ font-size:14.5px; color:var(--svr-muted); line-height:1.55; margin:0; }

/* Tools strip */
.svr-tools{ background:var(--svr-slate); }
.svr-tools .svr-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:34px; padding-bottom:34px; }
.svr-tools__title{ font-family:var(--svr-serif); font-weight:600; color:#fff; font-size:23px; margin:0 0 6px; }
.svr-tools__sub{ color:#cdd6da; font-size:15px; margin:0; }
.svr-tools__cta{ display:inline-block; font-size:14px; font-weight:600; color:var(--svr-slate); background:var(--svr-blue-light); padding:12px 24px; border-radius:4px; text-decoration:none; white-space:nowrap; }
.svr-tools__cta:hover{ background:#b6e4f6; color:var(--svr-slate); }

/* Newsletter */
.svr-news{ background:#fff; padding:52px 0 56px; text-align:center; }
.svr-news__title{ font-family:var(--svr-serif); font-weight:600; font-size:24px; color:var(--svr-text); margin:0 0 8px; }
.svr-news__sub{ font-size:15.5px; color:var(--svr-muted); margin:0 auto 22px; max-width:460px; }
.svr-news__form{ max-width:480px; margin:0 auto; }

/* Single posts: comfortable reading measure for prose, full-width break-out for media.
   The global container is 1120px (great for exhibits); body text reads best at ~700px
   (~70-75 characters per line). Scoped to single posts, so the homepage is untouched. */
.single-post .entry-content > *{
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.single-post .entry-content > figure,
.single-post .entry-content > .wp-block-image,
.single-post .entry-content > .wp-block-gallery,
.single-post .entry-content > .wp-block-table,
.single-post .entry-content > table,
.single-post .entry-content > .wp-block-embed,
.single-post .entry-content > .wp-block-columns,
.single-post .entry-content > .gb-container,
.single-post .entry-content > .alignwide,
.single-post .entry-content > .alignfull{ max-width: 100%; }
.single-post .entry-content > figure img{ width: 100%; height: auto; }
/* Pull the Notes pullquote, the rating widget, and the post meta back into the
   same 700px reading column as the prose. The pullquote is a <figure>, so the
   break-out rule above would otherwise stretch it full width. The rating widget
   (FeedbackWP) sits inside the column but its plugin CSS removes the auto
   centering, and the entry-meta footer (categories + tags) lives outside
   .entry-content, so the column rule never reaches it. Only the table stays wide. */
.single-post .entry-content > figure.wp-block-pullquote{ max-width: 700px; }
.single-post .rmp-widgets-container{ max-width: 700px; margin-left: auto !important; margin-right: auto !important; }
.single-post .entry-meta{ max-width: 700px; margin-left: auto; margin-right: auto; }
/* Top-level article lists: pin the bullet/number to the reading edge so the
   marker sits in line with the body text instead of hanging out into the left
   margin. Scoped to direct children, so the boxed table of contents (wrapped in
   its own container) and any nested lists keep their default styling. The
   reference list uses a CSS counter so its numbers left-align at the same edge,
   with the citation hanging-indented for a clean two-digit ("33.") column. */
.single-post .entry-content > ul,
.single-post .entry-content > ol{ list-style: none; padding-left: 0; }
.single-post .entry-content > ul > li,
.single-post .entry-content > ol > li{ position: relative; padding-left: 1.7em; }
.single-post .entry-content > ul > li::before{ content: "\2022"; position: absolute; left: 0.2em; line-height: inherit; }
.single-post .entry-content > ol{ counter-reset: svr-ol; }
.single-post .entry-content > ol > li{ counter-increment: svr-ol; padding-left: 2.3em; }
.single-post .entry-content > ol > li::before{ content: counter(svr-ol) "."; position: absolute; left: 0; font-variant-numeric: tabular-nums; }

/* About page: same comfortable reading column, and a tidy portrait. */
.page-id-769 .entry-content > *{ max-width: 700px; margin-left: auto; margin-right: auto; }
.page-id-769 .about-lead{ max-width: 700px; margin-left: auto; margin-right: auto; }
.page-id-769 .about-lead::after{ content: ""; display: block; clear: both; }
.page-id-769 .about-lead__photo{ float: left; width: 230px; margin: 6px 30px 14px 0; }
.page-id-769 .about-lead__photo img{ width: 230px; height: 276px; object-fit: cover; object-position: center 14%; border-radius: 10px; display: block; }
.page-id-769 .about-lead__role{ font-size: 15px; font-weight: 500; color: var(--svr-blue); margin: 0 0 14px; }
.page-id-769 .about-lead p{ margin: 0 0 18px; }
@media (max-width: 600px){ .page-id-769 .about-lead__photo{ float: none; width: 200px; margin: 0 0 16px; } }
.about-cred{ text-align: center; padding: 14px 0; margin: 4px 0 10px; border-top: 1px solid var(--svr-line); border-bottom: 1px solid var(--svr-line); }
.about-cred__label{ display: block; font-size: 11px; letter-spacing: 2px; color: var(--svr-muted); margin-bottom: 5px; }
.about-cred__items{ font-size: 14px; color: var(--svr-text); }
/* Credential lists: drop default bullets for a tidy brand marker aligned with the headings. */
.page-id-769 .entry-content ul{ list-style: none; padding-left: 0; max-width: 700px; margin-left: auto; margin-right: auto; }
.page-id-769 .entry-content li{ position: relative; padding-left: 24px; margin-bottom: 12px; line-height: 1.55; }
.page-id-769 .entry-content li::before{ content: ""; position: absolute; left: 1px; top: 0.55em; width: 7px; height: 7px; background: var(--svr-blue); border-radius: 2px; }

/* Harmonize the newsletter band to the canonical brand blue (#247AB0). It was a
   navy base (#26447a) with a subtle gradient pseudo-element; flatten both so the
   newsletter matches the book band. Override here so GeneratePress/GenerateBlocks
   cached CSS doesn't need regenerating and the footer element stays untouched. */
.site-footer .gb-container-b7c20adb{ background-color:#247AB0 !important; }
.site-footer .gb-container-b7c20adb::before{ display:none !important; }

/* Footer widgets (Follow Me / Search): center each widget's content so the row
   reads balanced against the centered topic list and copyright above/below. */
.inside-footer-widgets{ text-align:center; }
.inside-footer-widgets .widget-title{ text-align:center; }
/* social icons: the plugin forces display:block + inline-block li and an inline
   style="text-align:left" on the <ul>, so override the inline value with !important. */
.inside-footer-widgets .lsi-social-icons{ text-align:center !important; }
/* search: .search-form is display:flex; make it inline-flex and center via the widget. */
.inside-footer-widgets .widget_search{ text-align:center; }
.inside-footer-widgets .search-form{ display:inline-flex; width:340px; max-width:100%; }

/* Footer "Topics To Explore": the six topics are a 3-column block (two each).
   On mobile WordPress stacks the columns, but the between-column gap is larger
   than the within-column paragraph gap, so the list reads with an uneven
   rhythm (two close, big gap, two close, big gap, two). Flatten it to a single
   evenly spaced column: zero the stacked-column gap and give every topic link
   one uniform bottom margin. Scoped by the unique .footer-link class so it only
   touches this block and survives any GenerateBlocks container-hash change. */
@media (max-width:781px){
  .wp-block-columns:has(> .wp-block-column > .footer-link){ gap:0 !important; }
  .footer-link{ margin-top:0 !important; margin-bottom:18px !important; }
}

/* ===== Native in-essay exhibits (replace collegeroi model screenshots) =====
   A designed native exhibit, NOT a source-artifact screenshot, so no cream
   wrapper. Lives in the single-post 700px reading column. */
.svr-fig{ margin:32px 0; font-family:var(--svr-sans); }
.svr-fig__title{ font-family:var(--svr-serif); font-weight:600; font-size:21px; line-height:1.28; color:var(--svr-ink); margin:0 0 6px; }
.svr-fig__dek{ font-size:15px; line-height:1.55; color:var(--svr-muted); margin:0 0 18px; }
.svr-fig__source{ font-size:12px; line-height:1.5; color:var(--svr-muted); margin:14px 0 0; }

/* Side-by-side comparison table */
.svr-cmp{ width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.4; table-layout:fixed; }
.svr-cmp th:first-child, .svr-cmp td:first-child{ width:40%; }
.svr-cmp th:not(:first-child), .svr-cmp td:not(:first-child){ width:30%; }
.svr-cmp thead th{ background:var(--svr-blue-light); color:var(--svr-ink); font-weight:700; font-size:13px; padding:11px 12px; vertical-align:bottom; text-align:right; border-bottom:2px solid var(--svr-blue); }
.svr-cmp thead th:first-child{ text-align:left; background:transparent; border-bottom:2px solid var(--svr-blue); }
.svr-cmp thead th span{ display:block; font-weight:400; font-size:11.5px; color:var(--svr-slate); margin-top:2px; }
.svr-cmp th, .svr-cmp td{ padding:9px 12px; text-align:right; border-bottom:1px solid var(--svr-line); }
.svr-cmp tbody th{ text-align:left; font-weight:500; color:var(--svr-text); }
.svr-cmp tbody th span{ display:block; font-weight:400; font-size:11.5px; color:var(--svr-muted); }
.svr-cmp tbody td{ font-weight:600; color:var(--svr-ink); font-variant-numeric:tabular-nums; }
.svr-cmp .svr-cmp__group th{ background:rgba(156,217,240,0.12); color:var(--svr-blue); font-weight:700; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; padding:8px 12px; border-bottom:1px solid var(--svr-line); }
.svr-cmp .pos{ color:#1A7F5A; }
.svr-cmp .neg{ color:#C0392B; }
@media (max-width:600px){
  .svr-cmp{ font-size:13px; }
  .svr-cmp th, .svr-cmp td{ padding:8px 8px; }
}

/* Responsive */
@media (max-width:782px){
  .svr-hero{ padding:72px 0 60px; }
  .svr-hero h1.svr-h1{ font-size:34px; }
  .svr-lede{ font-size:16px; }
  .svr-sec__title, .svr-tools__title{ font-size:24px; }
  .svr-bookband .svr-inner{ flex-direction:column; align-items:flex-start; }
  .svr-essay__tile span{ font-size:19px; }
}