/*
 * Scholar's Desk — a research-library presentation of the same site.
 * Loaded only when this design is live (or privately previewed); the Worker
 * adds data-sd ("desk" or "top") to <html> and server-renders the sidebar
 * (.sd-sidebar) and, on the home page, .sd-home. Everything is scoped to that
 * attribute, so this file can never affect the Original design.
 *
 * Tokens: ivory paper, warm grey sidebar, charcoal ink, burgundy accent,
 * EB Garamond (self-hosted). Text colours meet WCAG AA on their backgrounds.
 */

html[data-sd] {
  --sd-bg: #f5f2ed;
  --sd-surface: #ffffff;
  --sd-side: #efebe4;
  --sd-side-hover: #e7e1d7;
  --sd-side-active: #e3dbd0;
  --sd-line: #e2dbcf;
  --sd-line-strong: #d3c9ba;
  --sd-ink: #23201d;
  --sd-ink-soft: #57514a;
  --sd-ink-faint: #6b645c;
  --sd-wine: #7b1e2b;
  --sd-wine-deep: #5f1520;
  --sd-wine-soft: #f3e8e6;
  --sd-gold: #a8823a;
  /* Defaults; the Worker writes the owner's choices over these (#sd-custom). */
  --sd-font-head: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sd-font-body: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sd-font-ui: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sd-surface-soft: #faf8f4;
  --sd-placeholder: #e9e3d9;
  --sd-on-accent: #ffffff;
  --sd-text-scale: 1;
  --sd-head-scale: 1;
  --sd-banner-shade: 0.7;
  --sd-banner-img: url("/assets/hero-library.webp");
  --sd-heading: #23201d;
  --sd-head-weight: 500;
  --sd-head-tracking: 0;
  --sd-head-transform: none;
  --sd-head-variant: normal;
  --sd-body-leading: 1.6;
  --sd-body-weight: 400;
  --sd-side-ink: #23201d;
  --sd-side-ink-soft: #6b645c;
  --sd-side-line: #e2dbcf;
  --sd-side-accent: #7b1e2b;
  --sd-banner-tint: #18100e;
  --sd-side-w: 248px;
  --sd-radius: 8px;
  --sd-shadow: 0 1px 2px rgba(35, 32, 29, 0.05), 0 8px 24px -16px rgba(35, 32, 29, 0.25);
  --sd-link: #7b1e2b;
  --sd-link-hover: #7b1e2b;
  --sd-btn-bg: #7b1e2b;
  --sd-btn-ink: #ffffff;
  --sd-btn-hover: #5f1520;
  --sd-btn2-bg: #ffffff;
  --sd-btn2-ink: #7b1e2b;
  --sd-btn2-line: #d3c9ba;
  --sd-card: #ffffff;
  --sd-card-line: #e2dbcf;
  --sd-focus: #7b1e2b;
  --sd-radius-card: 8px;
  --sd-radius-img: 8px;
  --sd-radius-btn: 6px;
  --sd-border-w: 1px;
  --sd-header-h: 64px;
  --sd-brand-scale: 1;
  background: var(--sd-bg);
  font-size: calc(16px * var(--sd-text-scale));
}
@media (max-width: 600px) {
  html[data-sd] { font-size: calc(17px * var(--sd-text-scale)); }
}
.sd-sidebar [hidden], .sd-home [hidden] { display: none !important; }
.sd-home[data-sd-guides="3"] .sd-guide:nth-child(n+4),
.sd-home[data-sd-areas="4"] .sd-area:nth-child(n+5),
.sd-home[data-sd-areas="8"] .sd-area:nth-child(n+9) { display: none; }

/* ---------- Page ground + type ---------- */
html[data-sd] body {
  background: var(--sd-bg) !important;
  color: var(--sd-ink);
  font-family: var(--sd-font-body);
  line-height: var(--sd-body-leading);
  font-weight: var(--sd-body-weight);
}
html[data-sd] body::before,
html[data-sd] body::after { display: none !important; }
/* The home page's decorative side gutters belong to the Original look. */
html[data-sd] .decorative-side-gutters { display: none !important; }

html[data-sd] h1,
html[data-sd] h2,
html[data-sd] h3,
html[data-sd] h4,
html[data-sd] .font-display {
  font-family: var(--sd-font-head) !important;
  letter-spacing: var(--sd-head-tracking);
  text-transform: var(--sd-head-transform);
  font-variant-caps: var(--sd-head-variant);
}
html[data-sd] .font-sans { font-family: var(--sd-font-body); }
/* style.css gives every p, span, link and button its own font; here they follow
   the font of where they sit (body text, sidebar, menus), set by the editor. */
html[data-sd] :where(p, span, li, a, button, input, textarea, select, label, summary) { font-family: inherit; }
/* The design's own titles use the heading font (the rule above would otherwise win). */
html[data-sd] :is(.sd-card-title, .sd-area-title, .sd-start-title) { font-family: var(--sd-font-head); }
html[data-sd] #navbar,
html[data-sd] #mobile-menu,
html[data-sd] .sd-btn,
html[data-sd] .sd-btn-outline,
html[data-sd] .sd-search { font-family: var(--sd-font-ui); }

html[data-sd] a:focus-visible,
html[data-sd] button:focus-visible,
html[data-sd] input:focus-visible,
html[data-sd] select:focus-visible,
html[data-sd] summary:focus-visible {
  outline: 2px solid var(--sd-focus);
  outline-offset: 2px;
}

.sd-vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
html[data-sd] .sd-ico { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---------- Sidebar (desktop) ---------- */
.sd-sidebar { display: none; }

@media (min-width: 1024px) {
  html[data-sd="desk"] body { padding-left: var(--sd-side-w); }

  html[data-sd] .sd-sidebar {
    display: flex; flex-direction: column; gap: 14px;
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--sd-side-w);
    padding: 22px 0 14px; background: var(--sd-side); border-right: 1px solid var(--sd-side-line);
    overflow-y: auto; overscroll-behavior: contain; z-index: 70;
    font-family: var(--sd-font-ui); scrollbar-width: thin;
  }

  /* The original top bar stays for its account, My Study, display and donate
     controls; its brand and menu move into the sidebar. */
  html[data-sd="desk"] #navbar { left: var(--sd-side-w) !important; }
  html[data-sd="desk"] #navbar .brand-lockup,
  html[data-sd="desk"] #navbar .fce-nav-middle,
  html[data-sd="desk"] #navbar #mobile-menu-btn,
  html[data-sd="desk"] #navbar #mobile-menu { display: none !important; }
  html[data-sd="desk"] #navbar .fce-nav-row { justify-content: flex-end; }
}

.sd-brand {
  display: flex; align-items: center; gap: 10px; padding: 0 22px 6px;
  color: var(--sd-side-ink); text-decoration: none;
}
.sd-brand-mark { color: var(--sd-side-ink); display: grid; place-items: center; }
.sd-brand-cross { width: 30px; height: 44px; stroke-width: 1.4; }
/* The owner's own picture as the mark (brand.mark "image"): kept inside the
   same box as the drawn marks, never stretched. */
.sd-mark-img { object-fit: contain; display: block; }
.tp-cross.sd-mark-img { width: 28px; height: 28px; }
.sd-brand-cross.sd-mark-img { width: 40px; height: 44px; }
.sd-brand-text { display: flex; flex-direction: column; }
.sd-brand-name {
  font-size: calc(25px * var(--sd-brand-scale)); line-height: 0.98; letter-spacing: 0.02em; font-variant: small-caps;
  font-weight: 500;
}
.sd-brand-sub {
  margin-top: 6px; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sd-side-ink-soft);
}

.sd-side-search {
  position: relative; margin: 0 16px;
}
.sd-side-search .sd-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--sd-side-ink-soft); pointer-events: none;
}
.sd-side-search input {
  width: 100%; height: 38px; padding: 0 10px 0 34px; border-radius: 6px;
  border: 1px solid var(--sd-line-strong); background: var(--sd-surface-soft); color: var(--sd-ink);
  font: 0.94rem/1 var(--sd-font-ui);
}
.sd-side-search input::placeholder { color: var(--sd-ink-faint); }

.sd-nav { display: flex; flex-direction: column; gap: 10px; }
.sd-nav-list { list-style: none; margin: 0; padding: 0; }
.sd-nav-link {
  position: relative; display: flex; align-items: center; gap: 13px; width: 100%;
  min-height: 42px; padding: 0 22px; border: 0; background: none; cursor: pointer;
  color: var(--sd-side-ink); text-decoration: none; text-align: left;
  font: 1.06rem/1.2 var(--sd-font-ui);
}
.sd-nav-link .sd-ico { color: var(--sd-side-ink-soft); }
.sd-nav-link:hover { background: var(--sd-side-hover); }
.sd-nav-link.is-current { background: var(--sd-side-active); color: var(--sd-side-accent); }
/* Audio Bible: a sub-item under the Bible */
.sd-nav-link.sd-nav-sub { min-height: 36px; padding-left: 34px; font-size: .98rem; }
.sd-nav-link.sd-nav-sub .sd-ico { width: 18px; height: 18px; }
.sd-nav-link.is-current .sd-ico { color: var(--sd-side-accent); }
.sd-nav-link.is-current::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--sd-side-accent);
}

.sd-groups { border-top: 1px solid var(--sd-side-line); padding-top: 8px; }
.sd-group summary {
  display: flex; align-items: center; justify-content: space-between; list-style: none;
  padding: 9px 22px; cursor: pointer; color: var(--sd-side-ink-soft);
  font: 600 0.75rem/1.2 var(--sd-font-ui); letter-spacing: 0.16em; text-transform: uppercase;
}
.sd-group summary::-webkit-details-marker { display: none; }
.sd-group summary:hover { color: var(--sd-side-ink); }
.sd-group .sd-caret { width: 15px; height: 15px; transition: transform 0.15s ease; }
.sd-group[open] .sd-caret { transform: rotate(90deg); }
.sd-group ul { list-style: none; margin: 0 0 6px; padding: 0; }
.sd-group a {
  display: block; padding: 6px 22px 6px 55px; color: var(--sd-side-ink-soft); text-decoration: none;
  font: 0.97rem/1.3 var(--sd-font-ui);
}
.sd-group a:hover { color: var(--sd-side-accent); background: var(--sd-side-hover); }
.sd-group a.is-current { color: var(--sd-side-accent); font-weight: 600; }

.sd-side-foot { margin-top: auto; padding: 10px 16px 0; border-top: 1px solid var(--sd-side-line); }
.sd-side-support {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px;
  color: var(--sd-side-accent); text-decoration: none; font: 1rem/1.2 var(--sd-font-ui);
}
.sd-side-support:hover { background: var(--sd-side-hover); }

/* ---------- The original top bar, re-dressed ---------- */
html[data-sd] #navbar {
  background: rgba(245, 242, 237, 0.94) !important;
  border-bottom: 1px solid var(--sd-line) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
}
html[data-sd] #navbar,
html[data-sd] #navbar a,
html[data-sd] #navbar button { color: var(--sd-ink) !important; }
html[data-sd] #navbar .brand-lockup * {
  font-family: var(--sd-font-head) !important; color: var(--sd-ink) !important;
}
html[data-sd] #navbar #brand-accent { color: var(--sd-wine) !important; }
html[data-sd] #navbar .nav-study-btn,
html[data-sd] #navbar .nav-display-toggle,
html[data-sd] #navbar .profile-trigger,
html[data-sd] #navbar .fce-mobile-toggle {
  background: transparent !important; border-color: var(--sd-line-strong) !important;
  box-shadow: none !important;
}
html[data-sd] #navbar .nav-support-btn {
  background: var(--sd-btn-bg) !important; border-color: var(--sd-btn-bg) !important;
  color: var(--sd-btn-ink) !important; box-shadow: none !important; outline: none !important;
}
html[data-sd] #navbar .nav-support-btn * { color: var(--sd-btn-ink) !important; }
html[data-sd] #navbar .nav-display-toggle,
html[data-sd] #navbar .nav-display-label,
html[data-sd] #navbar .nav-signin-btn,
html[data-sd] #navbar .nav-support-btn,
html[data-sd] #navbar .nav-link {
  font-family: var(--sd-font-ui) !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 1rem !important; font-weight: 500 !important;
}
html[data-sd] #navbar .nav-signin-btn { background: transparent !important; border: 1px solid var(--sd-line-strong) !important; }
html[data-sd] #mobile-menu,
html[data-sd] .nav-display-menu,
html[data-sd] .profile-dropdown,
html[data-sd] .nav-menu-dropdown {
  background: var(--sd-surface) !important; border-color: var(--sd-line) !important;
  color: var(--sd-ink) !important;
}
html[data-sd] #mobile-menu a,
html[data-sd] #mobile-menu button { font-family: var(--sd-font-ui) !important; }

/* ---------- Shared building blocks ---------- */
.sd-btn,
.sd-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--sd-radius-btn); cursor: pointer;
  font: 1.06rem/1 var(--sd-font-ui); text-decoration: none; white-space: nowrap;
}
.sd-btn { background: var(--sd-btn-bg); color: var(--sd-btn-ink); border: 1px solid var(--sd-btn-bg); }
.sd-btn:hover { background: var(--sd-btn-hover); border-color: var(--sd-btn-hover); }
.sd-btn-outline { background: var(--sd-btn2-bg); color: var(--sd-btn2-ink); border: 1px solid var(--sd-btn2-line); }
.sd-btn-outline:hover { border-color: var(--sd-btn2-ink); }
.sd-btn .sd-ico, .sd-btn-outline .sd-ico { width: 18px; height: 18px; }

/* ---------- Home: "Your Research Desk" ---------- */
html[data-sd-page="home"] #home-root #hero,
html[data-sd-page="home"] #home-root #home-topics-strip,
html[data-sd-page="home"] #home-root #articles,
html[data-sd-page="home"] #home-root .fce-hero-copy,
html[data-sd-page="home"] .ssr-home-directory,
html[data-sd-page="home"] #library-banner,
html[data-sd-page="home"] #explore-feature,
html[data-sd-page="home"] #daily-feature,
html[data-sd-page="home"] #infographics-feature,
html[data-sd-page="home"] #ask-feature,
html[data-sd-page="home"] #featured-video,
html[data-sd-page="home"] #videos,
html[data-sd-page="home"] #papers,
html[data-sd-page="home"] #donate,
html[data-sd-page="home"] #social-strip { display: none !important; }

.sd-home {
  display: flex; flex-direction: column; gap: 34px; max-width: none; padding: calc(var(--sd-header-h) + 36px) clamp(20px, 2.6vw, 56px) 56px;
  font-family: var(--sd-font-body); color: var(--sd-ink);
}
.sd-top { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 400px); gap: 28px; align-items: start; }
.sd-top-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.sd-bottom { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 400px); gap: 28px; align-items: start; }
.sd-ask { padding-top: 52px; }

.sd-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.sd-eyebrow {
  margin: 0 0 6px; font-size: 0.81rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sd-ink-soft);
}
html[data-sd] .sd-h1 {
  margin: 0; font-size: calc(clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem) * var(--sd-head-scale)); line-height: 1.04; font-weight: 500;
  color: var(--sd-heading);
}
.sd-lead { margin: 10px 0 0; font-size: 1.35rem; line-height: 1.4; color: var(--sd-ink-soft); }

.sd-search {
  display: flex; align-items: stretch; min-height: 56px; background: var(--sd-surface);
  border: 1px solid var(--sd-line-strong); border-radius: var(--sd-radius); box-shadow: var(--sd-shadow);
}
.sd-search-field { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.sd-search-field .sd-ico { position: absolute; left: 16px; color: var(--sd-ink-faint); }
.sd-search input {
  width: 100%; height: 100%; min-height: 54px; padding: 0 14px 0 50px; border: 0; background: transparent;
  color: var(--sd-ink); font: 1.125rem/1 var(--sd-font-ui); border-radius: var(--sd-radius) 0 0 var(--sd-radius);
}
.sd-search input::placeholder { color: var(--sd-ink-faint); }
.sd-search select {
  flex: 0 0 auto; max-width: 210px; padding: 0 34px 0 16px; border: 0; border-left: 1px solid var(--sd-line);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2357514a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--sd-ink); font: 1rem/1 var(--sd-font-ui); appearance: none; -webkit-appearance: none; cursor: pointer;
}
.sd-search .sd-btn { margin: 6px; min-height: auto; }

/* Home banner slideshow: slides sit on top of each other in one grid cell, so
   the banner is as tall as its tallest slide and nothing jumps. */
.sd-banner {
  position: relative; overflow: hidden; border-radius: var(--sd-radius); color: #fff; background: #3a2a24;
}
.sd-slide-track { display: grid; }
.sd-slide {
  grid-area: 1 / 1; min-height: 268px; display: flex; align-items: center; padding: 36px 40px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sd-banner-tint) min(100%, calc(var(--sd-banner-shade) * 100% + 20%)), transparent) 0%, color-mix(in srgb, var(--sd-banner-tint) calc(var(--sd-banner-shade) * 100%), transparent) 42%, color-mix(in srgb, var(--sd-banner-tint) calc(var(--sd-banner-shade) * 25%), transparent) 100%),
    var(--sd-slide-img, var(--sd-banner-img)) center 40% / cover no-repeat,
    #3a2a24;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, transform .7s ease, visibility 0s linear .7s;
}
.sd-slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .7s ease, transform .7s ease, visibility 0s; }
.sd-slides .sd-slide { padding-bottom: 64px; }
.sd-banner[data-sd-effect="slide"] .sd-slide { transform: translateX(8%); }
.sd-banner[data-sd-effect="slide"] .sd-slide.is-before { transform: translateX(-8%); }
.sd-banner[data-sd-effect="slide"] .sd-slide.is-on { transform: none; }
.sd-slide-ctrls {
  position: absolute; left: 40px; right: 40px; bottom: 16px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
}
.sd-dots { display: flex; gap: 6px; align-items: center; }
.sd-dot {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;
}
.sd-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: width .3s, background .3s;
}
.sd-dot[aria-current="true"]::before { width: 24px; border-radius: 5px; background: #fff; }
.sd-slide-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .28);
  color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0;
}
.sd-slide-btn:hover { background: rgba(0, 0, 0, .45); }
.sd-slide-btn .sd-ico { width: 16px; height: 16px; }
.sd-slide-btn[data-sd-pause] { margin-left: auto; }
.sd-slide-btn[data-sd-pause] .sd-ico + .sd-ico,
.sd-slide-btn[data-sd-pause][aria-pressed="true"] .sd-ico:first-child { display: none; }
.sd-slide-btn[data-sd-pause][aria-pressed="true"] .sd-ico + .sd-ico { display: block; }
.sd-dot:focus-visible, .sd-slide-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sd-slide, .sd-slide.is-on { transition: none; transform: none !important; }
}
.sd-banner-copy { max-width: 520px; }
html[data-sd] .sd-banner h2 {
  margin: 0 0 10px; font-size: calc(clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem) * var(--sd-head-scale)); line-height: 1.1; font-weight: 500; color: #fff !important;
}
.sd-banner p { margin: 0 0 20px; font-size: 1.15rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }

.sd-section { display: flex; flex-direction: column; gap: 14px; }
.sd-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
html[data-sd] .sd-section-head h2 {
  margin: 0; font-size: calc(1.9rem * var(--sd-head-scale)); line-height: 1.15; font-weight: 500; color: var(--sd-heading);
}
.sd-section-head a {
  display: inline-flex; align-items: center; gap: 4px; color: var(--sd-link); text-decoration: none;
  font-size: 1.05rem; white-space: nowrap;
}
.sd-section-head a .sd-ico { width: 16px; height: 16px; }
.sd-section-head a:hover { color: var(--sd-link-hover); text-decoration: underline; text-underline-offset: 3px; }

.sd-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sd-card {
  display: flex; flex-direction: column; overflow: hidden; background: var(--sd-card);
  border: var(--sd-border-w) solid var(--sd-card-line); border-radius: var(--sd-radius-card); color: var(--sd-ink);
  text-decoration: none; box-shadow: var(--sd-shadow); transition: transform 0.15s ease, border-color 0.15s ease;
}
.sd-card:hover { transform: translateY(-2px); border-color: var(--sd-line-strong); }
.sd-card-img { display: grid; place-items: center; aspect-ratio: 16 / 8.5; background: var(--sd-placeholder); overflow: hidden; }
.sd-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-card-ph { width: 40px; height: 40px; color: var(--sd-ink-faint); }
.sd-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 18px; flex: 1 1 auto; }
.sd-card-title { color: var(--sd-heading); font-family: var(--sd-font-head); font-size: calc(1.45rem * var(--sd-head-scale)); line-height: 1.2; font-weight: 500; }
.sd-card-text { color: var(--sd-ink-soft); font-size: 1.08rem; line-height: 1.45; flex: 1 1 auto; }
.sd-card-cta { display: inline-flex; align-items: center; gap: 4px; color: var(--sd-link); font-size: 1.05rem; }
.sd-card-cta .sd-ico { width: 16px; height: 16px; }

.sd-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sd-area {
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--sd-card);
  border: var(--sd-border-w) solid var(--sd-card-line); border-radius: var(--sd-radius-card); color: var(--sd-ink); text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.sd-area:hover { border-color: var(--sd-line-strong); transform: translateY(-2px); }
.sd-area-img { display: block; aspect-ratio: 16 / 8; background: var(--sd-placeholder); overflow: hidden; }
.sd-area-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 68%; display: block; }
.sd-area-body { display: flex; flex-direction: column; gap: 4px; padding: 11px 34px 13px 14px; }
.sd-area-title { font-family: var(--sd-font-head); font-size: 1.1rem; line-height: 1.2; font-weight: 600; }
.sd-area-text { color: var(--sd-ink-soft); font-size: 0.95rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-area-go { position: absolute; right: 10px; bottom: 14px; width: 16px !important; height: 16px !important; color: var(--sd-ink-faint); }

.sd-latest {
  list-style: none; margin: 0; padding: 0; background: var(--sd-surface);
  border: 1px solid var(--sd-line); border-radius: var(--sd-radius); min-height: 120px;
}
.sd-latest li + li { border-top: 1px solid var(--sd-line); }
.sd-latest a {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding: 13px 18px; color: var(--sd-ink); text-decoration: none;
}
.sd-latest a:hover .sd-latest-title { color: var(--sd-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.sd-latest-type {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sd-wine);
}
.sd-latest-title { font-size: 1.12rem; line-height: 1.35; }
.sd-latest-topic { color: var(--sd-ink-faint); font-size: 0.95rem; white-space: nowrap; }
.sd-latest-wait { padding: 18px; color: var(--sd-ink-faint); }
/* "Featured": a quiet row of four small picture cards above "Recently added". */
.sd-featured { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sd-feat {
  display: flex; flex-direction: column; overflow: hidden; background: var(--sd-card); color: var(--sd-ink);
  border: var(--sd-border-w) solid var(--sd-card-line); border-radius: var(--sd-radius-card); text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.sd-feat:hover { transform: translateY(-2px); border-color: var(--sd-line-strong); }
.sd-feat-img { display: block; aspect-ratio: 16 / 9; background: var(--sd-placeholder); overflow: hidden; }
.sd-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-feat-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.sd-feat-type { color: var(--sd-ink-faint); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.sd-feat-title { color: var(--sd-heading); font-family: var(--sd-font-head); font-size: 1.02rem; line-height: 1.3; }
.sd-feat:hover .sd-feat-title { color: var(--sd-link-hover); }
@media (max-width: 900px) { .sd-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sd-home-side { display: flex; flex-direction: column; gap: 18px; }
.sd-panel {
  background: var(--sd-surface); border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
  padding: 22px 20px; box-shadow: var(--sd-shadow);
}
html[data-sd] .sd-panel h2 { margin: 0 0 6px; font-size: calc(1.75rem * var(--sd-head-scale)); font-weight: 500; color: var(--sd-heading); }
.sd-panel p { margin: 0 0 14px; color: var(--sd-ink-soft); font-size: 1.05rem; line-height: 1.45; }
.sd-panel-quiet { background: var(--sd-surface-soft); box-shadow: none; }
.sd-start { display: flex; flex-direction: column; gap: 10px; }
.sd-start-item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--sd-line); border-radius: var(--sd-radius); background: var(--sd-surface-soft);
  color: var(--sd-ink); text-decoration: none;
}
.sd-start-item:hover { border-color: var(--sd-line-strong); background: var(--sd-surface); }
.sd-start-ico {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sd-wine-soft); color: var(--sd-wine);
}
.sd-start-title { display: block; font-family: var(--sd-font-head); color: var(--sd-wine); font-size: 1.12rem; line-height: 1.25; }
.sd-start-text { display: block; color: var(--sd-ink-soft); font-size: 0.95rem; line-height: 1.3; margin-top: 2px; }
.sd-start-go { width: 16px !important; height: 16px !important; color: var(--sd-ink-faint); }
/* "Start here" stands out (owner, 2026-10-24): gold band, a "New here?" tag,
   bolder choices with gold icons, and a gentle lift on hover. */
.sd-panel-start {
  position: relative; border: 1px solid color-mix(in srgb, var(--sd-gold) 55%, var(--sd-line));
  border-top: 5px solid var(--sd-gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sd-gold) 10%, var(--sd-surface)), var(--sd-surface) 60%);
  box-shadow: 0 10px 28px rgba(84, 62, 20, 0.14);
}
.sd-start-badge {
  display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--sd-gold); color: #fff; font-family: var(--sd-font-ui); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.sd-panel-start .sd-start-item {
  background: var(--sd-surface); border-color: color-mix(in srgb, var(--sd-gold) 35%, var(--sd-line));
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.sd-panel-start .sd-start-item:hover, .sd-panel-start .sd-start-item:focus-visible {
  transform: translateY(-2px); border-color: var(--sd-gold); box-shadow: 0 8px 18px rgba(84, 62, 20, 0.16);
}
.sd-panel-start .sd-start-ico { background: linear-gradient(180deg, #c19a4d, var(--sd-gold)); color: #fff; }
.sd-panel-start .sd-start-title { font-weight: 600; }
.sd-panel-start .sd-start-go { color: var(--sd-gold); }
@media (prefers-reduced-motion: reduce) { .sd-panel-start .sd-start-item { transition: none; } .sd-panel-start .sd-start-item:hover { transform: none; } }

@media (max-width: 1279px) {
  .sd-top, .sd-bottom { grid-template-columns: minmax(0, 1fr); }
  .sd-ask { padding-top: 0; }
  .sd-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .sd-home { padding: 96px 20px 48px; }
}
@media (max-width: 860px) {
  .sd-guides { grid-template-columns: 1fr; }
  .sd-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-start { grid-template-columns: 1fr; }
  .sd-home-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .sd-home { padding: 88px 16px 40px; }
  .sd-search { flex-wrap: wrap; }
  .sd-search-field { flex-basis: 100%; }
  .sd-search select { flex: 1 1 auto; max-width: none; border-left: 0; border-top: 1px solid var(--sd-line); min-height: 48px; }
  .sd-search .sd-btn { margin: 6px; }
  .sd-slide { padding: 26px 22px; min-height: 0; }
  .sd-slides .sd-slide { padding-bottom: 62px; }
  .sd-slide-ctrls { left: 22px; right: 22px; bottom: 12px; gap: 4px; }
  .sd-dot { width: 20px; }
  .sd-dots { gap: 2px; }
  .sd-latest a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .sd-latest-topic { white-space: normal; }
}

/* ---------- Inner pages: the same paper, ink and accent ---------- */
html[data-sd] footer {
  background: var(--sd-bg) !important; border-top: 1px solid var(--sd-line) !important;
}
html[data-sd] .ssr-sitenav { background: var(--sd-side) !important; border-top: 1px solid var(--sd-line); }
html[data-sd] .ssr-sitenav h2,
html[data-sd] .ssr-sitenav h3 { color: var(--sd-wine) !important; }

@media (prefers-reduced-motion: reduce) {
  html[data-sd] .sd-card,
  html[data-sd] .sd-area,
  html[data-sd] .sd-group .sd-caret { transition: none; }
  html[data-sd] .sd-card:hover,
  html[data-sd] .sd-area:hover { transform: none; }
}

/* Full-width cover pictures (articles, infographics) are sized to the whole
   window (100vw) in the Original; beside the sidebar that pushed them 120px
   past the right edge and made the page scroll sideways. Here they span the
   area to the right of the sidebar instead. */
@media (min-width: 1024px) {
  html[data-sd="desk"] .detail-cover-hero {
    width: calc(100vw - var(--sd-side-w));
    margin-left: calc(50% - (100vw - var(--sd-side-w)) / 2);
    margin-right: calc(50% - (100vw - var(--sd-side-w)) / 2);
  }
}

/* Top bar height: match the page offsets the Original layout was built for. */
@media (min-width: 1024px) {
  html[data-sd] #navbar .fce-nav-row { min-height: 0 !important; height: var(--sd-header-h); padding-top: 0 !important; padding-bottom: 0 !important; }
  html[data-sd] #navbar .fce-nav-actions > * { max-height: 40px; }
}
@media (max-width: 1023px) {
  html[data-sd] #navbar .fce-mobile-toggle { margin-left: auto; }
}

/* Listing and search cards */
html[data-sd] #articles-grid .content-entry-card h3,
html[data-sd] #papers-list .content-entry-card h3,
html[data-sd] .topic-page-grid .content-entry-card h3,
html[data-sd] .search-page-result.content-entry-card h3,
html[data-sd] .content-entry-card h3 {
  font-family: var(--sd-font-head) !important; font-weight: 500 !important; color: var(--sd-heading) !important;
  letter-spacing: 0 !important;
}
html[data-sd] .content-entry-card {
  background: var(--sd-card) !important; border-color: var(--sd-card-line) !important; border-radius: var(--sd-radius-card) !important;
}
html[data-sd] .text-brand-700,
html[data-sd] .entry-read-link,
html[data-sd] #articles-grid .entry-read-link { color: var(--sd-link) !important; }

/* Article / infographic / paper header: a light, scholarly title block
   (cover-image headers keep their photo and dark wash for legibility). */
html[data-sd] .article-detail-hero:not(.article-detail-hero--cover),
html[data-sd] .article-detail-hero--custom {
  background: var(--sd-surface) !important;
  color: var(--sd-ink) !important;
  border-bottom: 1px solid var(--sd-line) !important;
}
html[data-sd] .article-detail-hero:not(.article-detail-hero--cover) .article-detail-title,
html[data-sd] .article-detail-hero:not(.article-detail-hero--cover) .article-detail-meta,
html[data-sd] .article-detail-hero:not(.article-detail-hero--cover) .article-detail-meta * {
  color: var(--sd-ink) !important; text-shadow: none !important;
}
html[data-sd] .article-detail-hero:not(.article-detail-hero--cover) .article-detail-title { font-weight: 500 !important; }
html[data-sd] .article-detail-hero:not(.article-detail-hero--cover) .article-detail-summary {
  color: var(--sd-ink-soft) !important; text-shadow: none !important;
}
html[data-sd] .article-detail-hero:not(.article-detail-hero--cover) .article-detail-back {
  color: var(--sd-ink) !important; background: transparent !important; border-color: var(--sd-line-strong) !important;
}
html[data-sd] .article-detail-topic {
  background: var(--sd-wine-soft) !important; color: var(--sd-wine) !important; border-color: transparent !important;
  box-shadow: none !important;
}
html[data-sd] .article-detail { border-radius: var(--sd-radius) !important; }

/* Page titles and headings follow the heading colour. */
html[data-sd] main :is(h1, h2, h3):not(.sd-banner h2) { color: var(--sd-heading); }
html[data-sd] .article-detail-hero:not(.article-detail-hero--cover) .article-detail-title { color: var(--sd-heading) !important; }

/* Wide screens: use the room instead of leaving a blank strip. */
@media (min-width: 1700px) {
  .sd-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sd-slide { min-height: 300px; }
  html[data-sd] main .max-w-7xl,
  html[data-sd] footer .max-w-7xl,
  html[data-sd] .ssr-sitenav-inner { max-width: min(1600px, 100%) !important; }
}
@media (min-width: 2200px) {
  .sd-home[data-sd-areas="8"] .sd-areas, .sd-home[data-sd-areas="4"] .sd-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sd-home[data-sd-areas="12"] .sd-areas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sd-home[data-sd-guides="6"] .sd-guides { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
html[data-sd] footer { border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; }
html[data-sd] footer > * { border-left: 0 !important; }

/* Typography settings from the Design Studio (weight, spacing, capitals, line spacing). */
html[data-sd] :is(h1, h2, h3, h4, .sd-h1, .sd-card-title, .sd-area-title, .sd-start-title) {
  font-weight: var(--sd-head-weight) !important;
  letter-spacing: var(--sd-head-tracking) !important;
  text-transform: var(--sd-head-transform) !important;
  font-variant-caps: var(--sd-head-variant) !important;
}
html[data-sd] :is(.article-detail-content, .prose, .sd-card-text, .sd-area-text, .sd-lead, .sd-panel p, .sd-banner p, .ha-sc-text) {
  line-height: var(--sd-body-leading) !important;
}
html[data-sd] :is(.article-detail-content, .prose) :is(p, li) { font-weight: var(--sd-body-weight); }

/* ==========================================================================
   Design Studio options. Each rule is switched on by a token the Worker puts
   on <html data-sdx="..."> (designs/scholars-desk/vars.js, flagsFor). Tokens
   only appear for non-default choices, so at the defaults none of this
   applies and the design looks exactly as it did before. The extra
   [data-sd] keeps these ahead of the layout rules in desk.css / top.css.
   ========================================================================== */
.sd-footer-note { margin: 0; padding: 14px 16px 18px; text-align: center; font: 0.95rem/1.5 var(--sd-font-ui); color: var(--sd-ink-soft); }
.sd-footer-note[hidden] { display: none !important; }

/* ---- Colours that apply only once chosen ---- */
html[data-sd][data-sdx~="c-link"] :is(.article-detail-content, .prose, .article-detail-summary, .ssr-intro) a:not([class*="btn"]) { color: var(--sd-link) !important; }
html[data-sd][data-sdx~="c-linkhover"] :is(.article-detail-content, .prose, .article-detail-summary, .ssr-intro) a:not([class*="btn"]):hover { color: var(--sd-link-hover) !important; }
html[data-sd][data-sdx~="c-btn"] body :is(.primary-btn, .fce-btn-primary, .home-feature-cta, .nav-signin-btn.is-primary, .hd-btn-primary) {
  background: var(--sd-btn-bg) !important; color: var(--sd-btn-ink) !important; border-color: var(--sd-btn-bg) !important;
}
html[data-sd][data-sdx~="c-btn"] body :is(.primary-btn, .fce-btn-primary, .home-feature-cta, .nav-signin-btn.is-primary, .hd-btn-primary):hover {
  background: var(--sd-btn-hover) !important; border-color: var(--sd-btn-hover) !important;
}
html[data-sd][data-sdx~="c-btn"] body :is(.primary-btn, .fce-btn-primary, .home-feature-cta, .nav-signin-btn.is-primary, .hd-btn-primary) :is(svg, i, span) { color: inherit !important; }
html[data-sd][data-sdx~="c-btn2"] body :is(.secondary-btn, .fce-btn-secondary, .article-detail-action-btn) {
  background: var(--sd-btn2-bg) !important; color: var(--sd-btn2-ink) !important; border-color: var(--sd-btn2-line) !important;
}
html[data-sd][data-sdx~="c-divider"] :is(hr, .article-detail-longform) { border-color: var(--sd-divider) !important; }
html[data-sd][data-sdx~="c-divider"] :is(footer, .ssr-sitenav) { border-top-color: var(--sd-divider) !important; }
html[data-sd][data-sdx~="c-divider"] :is(.sd-latest li + li) { border-top-color: var(--sd-divider) !important; }
html[data-sd][data-sdx~="c-divider"] .article-detail-hero { border-bottom-color: var(--sd-divider) !important; }
html[data-sd][data-sdx~="c-headerbg"] #navbar { background: var(--sd-header-bg) !important; }
html[data-sd][data-sdx~="c-headertext"] :is(#navbar, #navbar a:not(.nav-support-btn), #navbar button:not(.nav-support-btn), .tp-link, .tp-menu summary, .tp-brand, .tp-brand-name, .tp-search-link) { color: var(--sd-header-ink) !important; }
html[data-sd][data-sdx~="c-footerbg"] footer { background: var(--sd-footer-bg) !important; }
html[data-sd][data-sdx~="c-footertext"] :is(footer, footer p, footer span, footer li) { color: var(--sd-footer-ink) !important; }
html[data-sd][data-sdx~="c-footerlink"] footer a { color: var(--sd-footer-link) !important; }
html[data-sd][data-sdx~="c-mark"] mark { background: var(--sd-mark) !important; color: inherit !important; }
html[data-sd][data-sdx~="c-selection"] ::selection { background: var(--sd-selection); }
html[data-sd][data-sdx~="c-chipbg"] :is(.article-detail-topic, .tp-chips a) { background: var(--sd-chip-bg) !important; }
html[data-sd][data-sdx~="c-chiptext"] :is(.article-detail-topic, .tp-chips a) { color: var(--sd-chip-ink) !important; }
html[data-sd][data-sdx~="c-quotebg"] :is(.article-detail-content, .prose) blockquote { background: var(--sd-quote-bg) !important; padding: 0.8em 1.1em !important; border-radius: var(--sd-radius); }
html[data-sd][data-sdx~="c-tablehead"] :is(.article-detail-content, .prose) :is(th, thead td) { background: var(--sd-table-head) !important; }
html[data-sd][data-sdx~="c-tablestripe"] :is(.article-detail-content, .prose) tbody tr:nth-child(even) > * { background: var(--sd-table-stripe) !important; }

/* ---- Text ---- */
html[data-sd][data-sdx~="ps-tight"] :is(.article-detail-content, .prose) p { margin: 0.45rem 0 !important; }
html[data-sd][data-sdx~="ps-loose"] :is(.article-detail-content, .prose) p { margin: 1.35rem 0 !important; }
html[data-sd][data-sdx~="ms-narrow"] .article-detail-content { max-width: 36em; margin-left: auto; margin-right: auto; }
html[data-sd][data-sdx~="ms-wide"] .article-page { max-width: 1320px !important; }
html[data-sd][data-sdx~="ul-always"] :is(.article-detail-content, .prose) a { text-decoration: underline !important; text-underline-offset: 3px; }
html[data-sd][data-sdx~="ul-hover"] :is(.article-detail-content, .prose) a { text-decoration: none !important; }
html[data-sd][data-sdx~="ul-hover"] :is(.article-detail-content, .prose) a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
html[data-sd][data-sdx~="ul-none"] :is(.article-detail-content, .prose) a { text-decoration: none !important; }

/* ---- Lines and spacing ---- */
html[data-sd][data-sdx~="bd-medium"] :is(.sd-panel, .sd-latest, .sd-search, .tp-search) { border-width: 1.5px; }
html[data-sd][data-sdx~="bd-thick"] :is(.sd-panel, .sd-latest, .sd-search, .tp-search) { border-width: 2px; }
html[data-sd][data-sdx~="bd-medium"] .content-entry-card { border-width: 1.5px !important; }
html[data-sd][data-sdx~="bd-thick"] .content-entry-card { border-width: 2px !important; }

/* Large screens fit automatically (owner, 2026-10-18): above 1700px wide, everything
   sized in rem (text, page columns, the Bible reader, article widths) grows a little
   with the window, like a gentle browser zoom, up to +25% at about 2500px and wider.
   Normal laptops and desktops (< 1700px) are unchanged; % keeps the reader's own
   browser font setting as the base. */
@media (min-width: 1700px) {
  html[data-sd] { font-size: min(125%, calc(100% + (100vw - 1700px) / 200)); }
}
html[data-sd][data-sdx~="w-narrow"] { --sd-page-max: 1100px; }
html[data-sd][data-sdx~="w-normal"] { --sd-page-max: 1280px; }
html[data-sd][data-sdx~="w-wide"] { --sd-page-max: 1480px; }
html[data-sd][data-sdx~="w-full"] { --sd-page-max: 100%; }
html[data-sd]:is([data-sdx~="w-narrow"], [data-sdx~="w-normal"], [data-sdx~="w-wide"], [data-sdx~="w-full"]) :is(.sd-home, .tp-body) { max-width: var(--sd-page-max); margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
html[data-sd]:is([data-sdx~="w-narrow"], [data-sdx~="w-normal"], [data-sdx~="w-wide"], [data-sdx~="w-full"]) :is(main .max-w-7xl, footer .max-w-7xl, .ssr-sitenav-inner) { max-width: var(--sd-page-max) !important; }

html[data-sd][data-sdx~="g-narrow"] :is(.sd-home, .tp-body) { padding-left: 14px; padding-right: 14px; }
html[data-sd][data-sdx~="g-wide"] :is(.sd-home, .tp-body) { padding-left: clamp(24px, 5vw, 96px); padding-right: clamp(24px, 5vw, 96px); }

html[data-sd][data-sdx~="sp-tight"] .sd-home { gap: 20px; }
html[data-sd][data-sdx~="sp-tight"] .tp-body { gap: 34px; }
html[data-sd][data-sdx~="sp-loose"] .sd-home { gap: 52px; }
html[data-sd][data-sdx~="sp-loose"] .tp-body { gap: 84px; }

html[data-sd][data-sdx~="dn-compact"] .sd-card-body { padding: 11px 14px 12px; gap: 5px; }
html[data-sd][data-sdx~="dn-compact"] :is(.sd-panel) { padding: 15px 14px; }
html[data-sd][data-sdx~="dn-compact"] .sd-latest a { padding: 8px 14px; }
html[data-sd][data-sdx~="dn-compact"] :is(.tp-guide-body) { padding: 10px 12px 12px; }
html[data-sd][data-sdx~="dn-compact"] .content-entry-card { padding: 0.75rem !important; }
html[data-sd][data-sdx~="dn-spacious"] .sd-card-body { padding: 22px 26px 24px; gap: 11px; }
html[data-sd][data-sdx~="dn-spacious"] :is(.sd-panel) { padding: 28px 26px; }
html[data-sd][data-sdx~="dn-spacious"] .sd-latest a { padding: 17px 22px; }
html[data-sd][data-sdx~="dn-spacious"] :is(.tp-guide-body) { padding: 20px 22px 24px; }
html[data-sd][data-sdx~="dn-spacious"] .content-entry-card { padding: 1.6rem !important; }

/* ---- Header & menu ---- */
html[data-sd][data-sdx~="hdr-static"] #navbar { position: absolute !important; }
html[data-sd][data-sdx~="hdr-static"] .tp-bar { position: absolute !important; }
html[data-sd][data-sdx~="no-hsearch"] .tp-search-link { display: none !important; }
html[data-sd][data-sdx~="br-as-typed"] :is(.sd-brand-name, .tp-brand-name) { text-transform: none; font-variant: normal; letter-spacing: 0.01em; }
html[data-sd][data-sdx~="br-caps"] :is(.sd-brand-name, .tp-brand-name) { text-transform: uppercase; font-variant: normal; letter-spacing: 0.06em; }
html[data-sd][data-sdx~="br-small-caps"] :is(.sd-brand-name, .tp-brand-name) { text-transform: none; font-variant: small-caps; letter-spacing: 0.03em; }
html[data-sd][data-sdx~="no-sgroups"] .sd-groups { display: none !important; }

/* ---- Home ---- */
html[data-sd][data-sdx~="lt-3"] .sd-latest li:nth-child(n+4),
html[data-sd][data-sdx~="lt-4"] .sd-latest li:nth-child(n+5),
html[data-sd][data-sdx~="lt-5"] .sd-latest li:nth-child(n+6) { display: none; }

/* ---- Article pages (also infographics and source papers) ---- */
html[data-sd][data-sdx~="at-s"] .article-detail-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem) !important; }
html[data-sd][data-sdx~="at-l"] .article-detail-title { font-size: clamp(2.3rem, 5.4vw, 4rem) !important; }
html[data-sd][data-sdx~="no-readtime"] .article-readtime { display: none !important; }
html[data-sd][data-sdx~="no-toc"] .article-toc { display: none !important; }
html[data-sd][data-sdx~="dropcap"] .article-detail-content:not(.article-detail-longform) > p:first-of-type::first-letter {
  float: left; margin: 0.06em 0.1em 0 0; font-family: var(--sd-font-head); font-size: 3.3em; line-height: 0.82; color: var(--sd-wine);
}
html[data-sd][data-sdx~="img-rounded"] .article-detail-content img { border-radius: 14px !important; }
html[data-sd][data-sdx~="img-framed"] .article-detail-content img { padding: 6px !important; background: var(--sd-surface) !important; border: 1px solid var(--sd-line) !important; border-radius: 4px !important; box-shadow: var(--sd-shadow) !important; }
html[data-sd][data-sdx~="img-plain"] .article-detail-content img { border-radius: 0 !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html[data-sd][data-sdx~="rel-0"] #article-related { display: none !important; }
html[data-sd][data-sdx~="rel-1"] .article-related-card:nth-child(n+2),
html[data-sd][data-sdx~="rel-2"] .article-related-card:nth-child(n+3) { display: none !important; }
html[data-sd][data-sdx~="no-share"] #article-share-btn { display: none !important; }

/* ---- Cards & lists ---- */
html[data-sd][data-sdx~="cs-flat"] :is(.sd-card, .sd-area, .tp-guide, .tp-start-item, .content-entry-card) { box-shadow: none !important; border-color: transparent !important; }
html[data-sd][data-sdx~="cs-bordered"] :is(.sd-card, .sd-area, .tp-guide, .tp-start-item, .content-entry-card) { box-shadow: none !important; }
html[data-sd][data-sdx~="cs-shadow"] :is(.sd-card, .sd-area, .tp-guide, .tp-start-item, .content-entry-card) { border-color: transparent !important; box-shadow: 0 2px 4px rgba(35, 32, 29, .06), 0 18px 40px -18px rgba(35, 32, 29, .38) !important; }
html[data-sd][data-sdx~="cr-wide"] :is(.sd-card-img, .tp-guide-img, .sd-area-img, .content-entry-card .entry-visual) { aspect-ratio: 16 / 9 !important; height: auto !important; min-height: 0 !important; }
html[data-sd][data-sdx~="cr-classic"] :is(.sd-card-img, .tp-guide-img, .sd-area-img, .content-entry-card .entry-visual) { aspect-ratio: 4 / 3 !important; height: auto !important; min-height: 0 !important; }
html[data-sd][data-sdx~="cr-square"] :is(.sd-card-img, .tp-guide-img, .sd-area-img, .content-entry-card .entry-visual) { aspect-ratio: 1 / 1 !important; height: auto !important; min-height: 0 !important; }
html[data-sd][data-sdx~="no-csum"] :is(.content-entry-card .article-body-preview, .sd-card-text, .tp-guide-text, .sd-area-text, .tp-area-text) { display: none !important; }
html[data-sd][data-sdx~="no-ctopic"] .content-entry-card .text-brand-700 { display: none !important; }
@media (min-width: 1024px) {
  html[data-sd][data-sdx~="cols-2"] :is(.topic-page-grid, #papers-list) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-sd][data-sdx~="cols-3"] :is(.topic-page-grid, #papers-list) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html[data-sd][data-sdx~="cols-4"] :is(.topic-page-grid, #papers-list) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---- Buttons ---- */
html[data-sd][data-sdx~="bsh"] body :is(.primary-btn, .secondary-btn, .fce-btn, .article-detail-action-btn, .nav-support-btn, .nav-signin-btn, .home-feature-cta) { border-radius: var(--sd-radius-btn) !important; }
html[data-sd][data-sdx~="bw-medium"] :is(.sd-btn, .sd-btn-outline, .primary-btn, .secondary-btn, .fce-btn) { font-weight: 500 !important; }
html[data-sd][data-sdx~="bw-bold"] :is(.sd-btn, .sd-btn-outline, .primary-btn, .secondary-btn, .fce-btn) { font-weight: 700 !important; }
html[data-sd][data-sdx~="bcaps"] :is(.sd-btn, .sd-btn-outline, .primary-btn, .secondary-btn, .fce-btn) { text-transform: uppercase !important; letter-spacing: 0.06em !important; }

/* ---- Footer ---- */
html[data-sd][data-sdx~="no-showcase"] .ha-showcase-wrap { display: none !important; }

/* ---- Effects & motion (visitors who ask for less motion always get less) ---- */
html[data-sd][data-sdx~="no-motion"] *,
html[data-sd][data-sdx~="no-motion"] *::before,
html[data-sd][data-sdx~="no-motion"] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
html[data-sd][data-sdx~="no-hover"] :is(.sd-card, .sd-area, .content-entry-card, .tp-guide, .tp-start-item):hover { transform: none !important; }
html[data-sd][data-sdx~="no-hover"] .tp-area:hover .tp-area-img img,
html[data-sd][data-sdx~="no-hover"] .content-entry-card:hover img { transform: none !important; }
html[data-sd][data-sdx~="texture"] body {
  background: var(--sd-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat !important;
}

/* ---- Picking a setting from the page (Studio preview only) ---- */
.sd-pick-box {
  position: fixed; z-index: 2147482000; pointer-events: none; border: 2px solid #3a57e8; border-radius: 4px;
  background: rgba(58, 87, 232, .08); box-shadow: 0 0 0 9999px rgba(15, 18, 30, .06); transition: all .08s ease-out;
}
.sd-pick-box span {
  position: absolute; left: -2px; bottom: 100%; margin-bottom: 4px; padding: 3px 8px; border-radius: 6px; white-space: nowrap;
  background: #3a57e8; color: #fff; font: 600 12px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[data-sd-picking] body, html[data-sd-picking] body * { cursor: crosshair !important; }

/* ==========================================================================
   Layout options (Design Studio v3). Like the options above, each rule is
   switched on only by a non-default choice: a data-sdx token, or an
   attribute on a home section (data-sd-w / data-sd-bg / data-sd-sp). At the
   defaults none of it applies.
   ========================================================================== */

/* ---- Home sections: width, background, spacing ---- */
:is(.sd-home, .tp-body) > [data-sd-section][data-sd-w="contained"] {
  width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; box-sizing: border-box;
}
:is(.sd-home, .tp-body) > [data-sd-section][data-sd-bg] {
  padding: 26px clamp(16px, 2vw, 28px); border-radius: var(--sd-radius); background: var(--sd-sec-bg); box-sizing: border-box;
}
:is(.sd-home, .tp-body) > [data-sd-section][data-sd-bg="tint"] { --sd-sec-bg: color-mix(in srgb, var(--sd-wine) 6%, var(--sd-bg)); }
:is(.sd-home, .tp-body) > [data-sd-section][data-sd-bg="band"] { --sd-sec-bg: var(--sd-wine); color: var(--sd-on-accent); }
html[data-sd] :is(.sd-home, .tp-body) > [data-sd-section][data-sd-bg="band"] > .sd-section-head :is(h2, a, a .sd-ico),
html[data-sd] :is(.sd-home, .tp-body) > [data-sd-section][data-sd-bg="band"] > .sd-section > .sd-section-head :is(h2, a, a .sd-ico),
html[data-sd] :is(.sd-home, .tp-body) > [data-sd-section][data-sd-bg="band"] > .tp-section-intro { color: var(--sd-on-accent) !important; }
/* Edge to edge: the background runs to both sides of the window (an outset
   border image, so it never makes the page scroll sideways); the words stay
   lined up with the other sections. */
:is(.sd-home, .tp-body) > [data-sd-section][data-sd-w="full"][data-sd-bg] {
  border-radius: 0; background: none; padding-left: 0; padding-right: 0;
  border-image: linear-gradient(var(--sd-sec-bg), var(--sd-sec-bg)) fill 0 / 0 / 0 100vw;
}
.sd-home > [data-sd-section][data-sd-sp="tight"] { margin-top: -10px; margin-bottom: -10px; }
.tp-body > [data-sd-section][data-sd-sp="tight"] { margin-top: -16px; margin-bottom: -16px; }
.sd-home > [data-sd-section][data-sd-sp="roomy"] { margin-top: 20px; margin-bottom: 20px; }
.tp-body > [data-sd-section][data-sd-sp="roomy"] { margin-top: 28px; margin-bottom: 28px; }
:is(.sd-home, .tp-body) > [data-sd-section][data-sd-bg][data-sd-sp="tight"] { padding-top: 14px; padding-bottom: 14px; }
:is(.sd-home, .tp-body) > [data-sd-section][data-sd-bg][data-sd-sp="roomy"] { padding-top: 44px; padding-bottom: 44px; }

/* ---- Sidebar on the right (Scholar's Desk) ---- */
@media (min-width: 1024px) {
  html[data-sd="desk"][data-sdx~="side-right"] body { padding-left: 0; padding-right: var(--sd-side-w); }
  html[data-sd="desk"][data-sdx~="side-right"] .sd-sidebar { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--sd-side-line); }
  html[data-sd="desk"][data-sdx~="side-right"] #navbar { left: 0 !important; right: var(--sd-side-w) !important; }
  html[data-sd="desk"][data-sdx~="side-right"] .sd-nav-link.is-current::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
  /* Floating buttons on the right (Listen, My Study) move off the sidebar. */
  html[data-sd="desk"][data-sdx~="side-right"] :is(.narrator-launch, .study-fab) { right: calc(var(--sd-side-w) + 16px) !important; }
}

/* ---- Header styles ---- */
/* Scholar's Desk: the site name at the top of the sidebar. */
html[data-sd="desk"][data-sdx~="hd-centered"] .sd-brand { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 0 16px 6px; }
html[data-sd="desk"][data-sdx~="hd-centered"] .sd-brand-text { align-items: center; }
html[data-sd="desk"][data-sdx~="hd-compact"] .sd-sidebar { gap: 10px; padding-top: 16px; }
html[data-sd="desk"][data-sdx~="hd-compact"] .sd-brand { gap: 8px; padding-bottom: 0; }
html[data-sd="desk"][data-sdx~="hd-compact"] .sd-brand-cross { width: 22px; height: 32px; }
html[data-sd="desk"][data-sdx~="hd-compact"] .sd-brand-name { font-size: calc(20px * var(--sd-brand-scale)); }
html[data-sd="desk"][data-sdx~="hd-compact"] .sd-nav-link { min-height: 36px; font-size: 1rem; }
/* Menu bar across the top (The Archive, Clarity, or the Desk with its sidebar off). */
@media (min-width: 1400px) {
  html[data-sd="top"][data-sdx~="hd-centered"] { padding-top: 46px; }
  html[data-sd="top"][data-sdx~="hd-centered"] .tp-bar {
    right: 0; flex-direction: column; justify-content: flex-start; gap: 0; height: auto; padding-left: 0; pointer-events: none;
  }
  html[data-sd="top"][data-sdx~="hd-centered"] .tp-brand { height: var(--sd-header-h); pointer-events: auto; }
  html[data-sd="top"][data-sdx~="hd-centered"] .tp-nav {
    pointer-events: auto; align-self: stretch; display: flex; justify-content: center; height: 46px;
    background: color-mix(in srgb, var(--sd-bg) 96%, transparent); border-bottom: 1px solid var(--sd-line);
  }
  html[data-sd="top"][data-sdx~="hd-centered"][data-sdx~="c-headerbg"] .tp-nav { background: var(--sd-header-bg); }
  html[data-sd="top"][data-sdx~="hd-centered"] .tp-search-link { pointer-events: auto; position: absolute; right: 32px; top: calc(var(--sd-header-h) + 3px); }
}
html[data-sd="top"][data-sdx~="hd-compact"] .tp-bar { gap: clamp(10px, 1.2vw, 20px); padding-left: 24px; }
html[data-sd="top"][data-sdx~="hd-compact"] .tp-cross { width: 20px; height: 20px; }
html[data-sd="top"][data-sdx~="hd-compact"] .tp-brand-name { font-size: calc(.98rem * var(--sd-brand-scale)); }
html[data-sd="top"][data-sdx~="hd-compact"] :is(.tp-link, .tp-menu summary) { height: 34px; padding: 0 6px; font-size: .92rem; }

/* ---- Lists of articles, papers and topics: one per row ---- */
html[data-sd][data-sdx~="list-rows"] :is(.topic-page-grid, #papers-list) { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 640px) {
  html[data-sd][data-sdx~="list-rows"] :is(.topic-page-grid, #papers-list) .entry-card-shell { flex-direction: row !important; align-items: stretch; }
  html[data-sd][data-sdx~="list-rows"] :is(.topic-page-grid, #papers-list) .entry-visual {
    flex: 0 0 clamp(180px, 30%, 320px); width: clamp(180px, 30%, 320px) !important; height: auto !important; min-height: 150px; aspect-ratio: auto !important;
  }
  html[data-sd][data-sdx~="list-rows"] :is(.topic-page-grid, #papers-list) .entry-content { flex: 1 1 auto; min-width: 0; }
}

/* ---- Footer: site directory columns, alignment ---- */
html[data-sd][data-sdx~="fcols-1"] .ssr-sitenav-inner { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  html[data-sd][data-sdx~="fcols-2"] .ssr-sitenav-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-sd][data-sdx~="fcols-3"] .ssr-sitenav-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-sd][data-sdx~="fcols-4"] .ssr-sitenav-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
html[data-sd][data-sdx~="falign-center"] .ssr-sitenav-inner { text-align: center; }
html[data-sd][data-sdx~="falign-center"] footer > .max-w-7xl { flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; }
html[data-sd][data-sdx~="falign-left"] footer > .max-w-7xl { justify-content: flex-start; flex-wrap: wrap; gap: 12px 28px; }
html[data-sd][data-sdx~="falign-left"] .sd-footer-note { text-align: left; }

/* ---- Article pages: the "On this page" box beside the text ---- */
@media (min-width: 1280px) {
  html[data-sd]:is([data-sdx~="toc-left"], [data-sdx~="toc-right"]) .article-detail-body:has(> .article-toc) {
    display: grid; grid-template-rows: repeat(40, auto); row-gap: 0; column-gap: 32px; align-items: start;
  }
  html[data-sd]:is([data-sdx~="toc-left"], [data-sdx~="toc-right"]) .article-detail-body:has(> .article-toc) > * { margin-bottom: 1.4rem; min-width: 0; }
  html[data-sd][data-sdx~="toc-right"] .article-detail-body:has(> .article-toc) { grid-template-columns: minmax(0, 1fr) 250px; }
  html[data-sd][data-sdx~="toc-right"] .article-detail-body:has(> .article-toc) > * { grid-column: 1; }
  html[data-sd][data-sdx~="toc-left"] .article-detail-body:has(> .article-toc) { grid-template-columns: 250px minmax(0, 1fr); }
  html[data-sd][data-sdx~="toc-left"] .article-detail-body:has(> .article-toc) > * { grid-column: 2; }
  html[data-sd]:is([data-sdx~="toc-left"], [data-sdx~="toc-right"]) .article-detail-body > .article-toc {
    grid-row: 1 / -1; position: sticky; top: calc(var(--sd-header-h) + 24px); margin: 0;
    max-height: calc(100vh - var(--sd-header-h) - 48px); overflow: auto;
  }
  html[data-sd][data-sdx~="toc-right"] .article-detail-body > .article-toc { grid-column: 2; }
  html[data-sd][data-sdx~="toc-left"] .article-detail-body > .article-toc { grid-column: 1; }
  /* Beside the text the list is always open: a plain heading replaces the
     open/close button. */
  html[data-sd]:is([data-sdx~="toc-left"], [data-sdx~="toc-right"]) .article-detail-body > .article-toc .article-toc-toggle { display: none; }
  html[data-sd]:is([data-sdx~="toc-left"], [data-sdx~="toc-right"]) .article-detail-body > .article-toc::before {
    content: "On this page"; display: block; padding: .75rem 1rem .25rem; font: 700 .95rem/1.3 var(--sd-font-ui); color: var(--sd-heading);
  }
  html[data-sd]:is([data-sdx~="toc-left"], [data-sdx~="toc-right"]) .article-detail-body > .article-toc .article-toc-list {
    max-height: none !important; overflow: visible !important; padding: .2rem 1rem .8rem !important;
  }
}

/* ---- Article cover picture ---- */
html[data-sd][data-sdx~="cov-contained"] .detail-cover-hero {
  width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: var(--sd-radius-img); overflow: hidden;
}
html[data-sd][data-sdx~="cov-contained"] :is(.article-detail, .infographic-detail):has(.detail-cover-hero) { --detail-cover-height: clamp(280px, 36vw, 520px); }
html[data-sd][data-sdx~="cov-hidden"] .detail-cover-hero { display: none !important; }
html[data-sd][data-sdx~="cov-hidden"] :is(.article-detail-hero--cover, .infographic-detail-header) {
  margin-top: 0 !important; min-height: 0 !important; padding-top: 1.5rem !important;
}

/* ---- Editing the page from the Studio (private preview only) ---- */
.sd-pick-sel {
  position: fixed; z-index: 2147481900; pointer-events: none; border: 2px solid #e58a00; border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(229, 138, 0, .25);
}
html[data-sd-picking] [data-sd-editing],
html[data-sd-picking] [data-sd-editing] * { cursor: text !important; }
[data-sd-editing] { outline: 2px dashed #3a57e8; outline-offset: 3px; background: rgba(58, 87, 232, .07); border-radius: 2px; }
/* Spanish homepage (/es): a guide that is still English says so on its card. */
.sd-en-tag { margin-left: 10px; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.72em; font-weight: 600; opacity: 0.75; white-space: nowrap; }