/*
Theme Name: Second Brain Sidekick
Description: Monochrome editorial block theme for the Second Brain Sidekick website.
Version: 0.9.11
Text Domain: second-brain-sidekick
Requires at least: 6.6
Requires PHP: 8.1
*/

:root {
  --sbs-black: #000;
  --sbs-white: #fff;
  --sbs-line: rgba(0, 0, 0, 0.24);
  --sbs-line-soft: rgba(0, 0, 0, 0.1);
  --sbs-display: "Space Grotesk", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sbs-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sbs-meta: "Space Mono", "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  --sbs-japanese: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif;
  --sbs-japanese-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body,
.editor-styles-wrapper {
  background: var(--sbs-white);
  color: var(--sbs-black);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.wp-site-blocks {
  min-height: 100vh;
  overflow: clip;
  background: var(--sbs-white);
}

.wp-site-blocks > * {
  margin-block-start: 0;
}

.sbs-header-shell {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--sbs-black);
  background: var(--sbs-white);
}

.sbs-header-inner {
  min-height: 90px;
  gap: 1.75rem;
}

.sbs-header-brand {
  gap: 0.9rem;
  min-width: 0;
}

.sbs-wordmark,
.sbs-wordmark a {
  color: var(--sbs-black) !important;
  font-family: var(--sbs-display);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.sbs-header-tagline {
  display: block;
  max-width: 20rem;
  margin: 0 !important;
  padding-left: 1.1rem;
  border-left: 1px solid var(--sbs-black);
  color: var(--sbs-black);
  font-family: var(--sbs-meta);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
}

.sbs-primary-navigation {
  color: var(--sbs-black);
  font-family: var(--sbs-meta);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.sbs-navigation-list {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.7vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sbs-navigation-item {
  margin: 0;
}

.sbs-language-switcher {
  white-space: nowrap;
}

.sbs-language-current,
.sbs-language-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.sbs-language-current {
  font-weight: 700;
}

.sbs-language-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.sbs-language-switcher [lang="ja"],
.sbs-navigation--ja {
  font-family: var(--sbs-japanese);
}

.sbs-navigation-mobile {
  display: none;
}

.sbs-primary-navigation .wp-block-navigation-item__content {
  position: relative;
  padding: 0.48rem 0;
  color: var(--sbs-black) !important;
  text-decoration: none;
}

.sbs-primary-navigation .wp-block-navigation-item__content::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  content: "";
  background: var(--sbs-black);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 160ms ease;
}

.sbs-primary-navigation .wp-block-navigation-item__content:hover::after,
.sbs-primary-navigation .current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
  transform-origin: left;
}

.sbs-primary-navigation .wp-block-navigation__responsive-container-open,
.sbs-primary-navigation .wp-block-navigation__responsive-container-close {
  color: var(--sbs-black);
}

.sbs-primary-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--sbs-black) !important;
  color: var(--sbs-white);
}

.sbs-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.sbs-primary-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: var(--sbs-white) !important;
}

.sbs-main {
  position: relative;
  padding-top: clamp(3.25rem, 8vw, 8.5rem);
  padding-bottom: clamp(4.5rem, 10vw, 10rem);
  background: var(--sbs-white);
}

.sbs-main::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(1.25rem, calc((100vw - 1280px) / 2));
  width: 1px;
  content: "";
  background: var(--sbs-line-soft);
  pointer-events: none;
}

.sbs-main > * {
  position: relative;
}

/* Editorial axis: keep headings and copy flush-left instead of letting the
   constrained layout auto-center narrow (max-width) elements. Overrides the
   per-container `margin-left:auto !important` WordPress emits for constrained
   layouts, so it must be !important with matching specificity. */
.sbs-main .sbs-home-hero > *,
.sbs-main .sbs-section-intro > *,
.sbs-main .sbs-home-section > *,
.sbs-main .sbs-scene > *,
.sbs-main .sbs-next-step-panel > *,
.sbs-main--about .sbs-about-intro > *,
.sbs-main--about .sbs-about-section > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   Signature: the knowledge graph
   ============================================================ */

/* Hero graph — the product thesis drawn as nodes and edges. */
.sbs-hero-graph {
  max-width: 1180px;
  margin-bottom: clamp(2.25rem, 5vw, 4rem);
}

.sbs-hero-graph-inner {
  overflow: visible;
}

.sbs-hero-graph svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--sbs-black);
}

/* Sizes are viewBox units (960 wide), so they scale with the hero. Set large
   enough that the graph reads as the hero image, not an inline explainer. */
.sbs-hero-graph text {
  font-family: var(--sbs-meta);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  fill: var(--sbs-black);
}

.sbs-g-hub text {
  font-family: var(--sbs-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sbs-g-out text {
  font-family: var(--sbs-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sbs-g-node circle,
.sbs-g-hub circle {
  fill: var(--sbs-black);
}

.sbs-g-hub-ring {
  fill: none;
  stroke: var(--sbs-black);
  stroke-width: 1;
}

.sbs-g-edge {
  fill: none;
  stroke: var(--sbs-line);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sbs-graph-draw 0.9s ease forwards;
  animation-delay: var(--d, 0s);
}

.sbs-g-edge--out {
  stroke: var(--sbs-black);
  stroke-width: 1.4;
}

.sbs-g-node,
.sbs-g-hub,
.sbs-g-out {
  opacity: 0;
  animation: sbs-graph-fade 0.5s ease forwards;
  animation-delay: var(--d, 0s);
}

@keyframes sbs-graph-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes sbs-graph-fade {
  to { opacity: 1; }
}

/* Mobile text lockup of the same idea; SVG hidden below tablet. */
.sbs-hero-graph-chain {
  display: none;
  margin: 0;
  color: var(--sbs-black);
  font-family: var(--sbs-meta);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.01em;
}

/* Section nodes — each section rule begins with a graph node. */
.sbs-home-hero,
.sbs-section-intro,
.sbs-home-section,
.sbs-listing-header,
.sbs-page-header,
.sbs-article-header,
.sbs-main--about .sbs-about-header,
.sbs-main--about .sbs-about-intro,
.sbs-main--about .sbs-about-section {
  position: relative;
}

.sbs-home-hero::before,
.sbs-section-intro::before,
.sbs-home-section::before,
.sbs-listing-header::before,
.sbs-page-header::before,
.sbs-article-header::before,
.sbs-main--about .sbs-about-header::before,
.sbs-main--about .sbs-about-intro::before,
.sbs-main--about .sbs-about-section::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sbs-black);
}

@media (max-width: 781px) {
  .sbs-hero-graph-inner {
    display: none;
  }

  .sbs-hero-graph-chain {
    display: block;
  }

  .sbs-home-hero::before,
  .sbs-section-intro::before,
  .sbs-home-section::before,
  .sbs-listing-header::before,
  .sbs-page-header::before,
  .sbs-article-header::before,
  .sbs-main--about .sbs-about-header::before,
  .sbs-main--about .sbs-about-intro::before,
  .sbs-main--about .sbs-about-section::before {
    left: -2px;
    width: 6px;
    height: 6px;
    top: -3.5px;
  }
}

.sbs-main--front-page {
  padding-top: clamp(4rem, 10vw, 10rem);
}

.sbs-page-header,
.sbs-article-header,
.sbs-listing-header {
  margin-bottom: clamp(2.75rem, 7vw, 6.5rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--sbs-black);
}

.sbs-page-title,
.sbs-article-title,
.sbs-listing-header .wp-block-query-title {
  max-width: 15ch;
  margin-bottom: 0;
  color: var(--sbs-black);
  font-size: var(--wp--preset--font-size--display) !important;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.sbs-article-header {
  max-width: 980px;
}

.sbs-article-meta {
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.sbs-article-meta .wp-block-post-terms,
.sbs-article-meta .wp-block-post-terms a {
  color: var(--sbs-black) !important;
  font-family: var(--sbs-meta);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.sbs-article-content > :first-child,
.sbs-page-content > :first-child {
  margin-top: 0;
}

.sbs-article-content > :last-child,
.sbs-page-content > :last-child {
  margin-bottom: 0;
}

.sbs-article-content h2,
.sbs-page-content h2 {
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
}

.sbs-article-content h3,
.sbs-page-content h3 {
  margin-top: clamp(2.25rem, 5vw, 4rem);
}

.sbs-article-content p,
.sbs-page-content p {
  max-width: 64ch;
  line-height: 1.68;
}

.sbs-article-content a,
.sbs-page-content a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.sbs-listing-header {
  max-width: 980px;
}

.sbs-post-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--sbs-black);
}

.sbs-post-card {
  display: grid;
  grid-template-columns: minmax(7rem, 16%) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.8rem, 4.5vw, 3.5rem) 0;
  border-bottom: 1px solid var(--sbs-black);
  border-radius: 0;
  background: var(--sbs-white);
  box-shadow: none;
  transition: background 150ms ease, color 150ms ease;
}

.sbs-post-card:hover {
  background: var(--sbs-black);
  color: var(--sbs-white);
}

.sbs-post-card > .wp-block-post-date {
  grid-column: 1;
  grid-row: 1;
  color: inherit;
}

.sbs-post-card .wp-block-post-title,
.sbs-post-card .wp-block-post-excerpt,
.sbs-post-card .wp-block-read-more {
  grid-column: 2;
}

.sbs-post-card .wp-block-post-title {
  margin-top: 0;
  margin-bottom: 1.15rem;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.sbs-post-card .wp-block-post-title a,
.sbs-post-card .wp-block-post-excerpt__excerpt,
.sbs-post-card .wp-block-read-more {
  color: inherit !important;
}

.sbs-post-card .wp-block-post-title a {
  text-decoration: none;
}

.sbs-post-card .wp-block-post-excerpt__excerpt {
  max-width: 52ch;
  margin-bottom: 1.2rem;
  line-height: 1.68;
}

.sbs-post-card .wp-block-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-family: var(--sbs-meta);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-decoration: none;
}

.sbs-post-card .wp-block-read-more::after {
  content: "↗";
  transition: transform 160ms ease;
}

.sbs-post-card .wp-block-read-more:hover::after {
  transform: translate(2px, -2px);
}

.sbs-section-intro {
  max-width: 920px;
  padding-top: 1.2rem;
  border-top: 1px solid var(--sbs-black);
}

.sbs-eyebrow {
  display: inline-block;
  margin-bottom: 1.25rem !important;
  color: var(--sbs-black);
  font-family: var(--sbs-meta);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-transform: lowercase;
}

/* Obsidian wikilink label language. */
.sbs-eyebrow::before {
  content: "[[";
  margin-right: 0.12em;
  color: var(--sbs-line);
}

.sbs-eyebrow::after {
  content: "]]";
  margin-left: 0.12em;
  color: var(--sbs-line);
}

.sbs-section-intro h2 {
  max-width: 16ch;
  margin-bottom: 1.5rem;
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.sbs-section-intro .wp-block-paragraph:not(.sbs-eyebrow) {
  max-width: 54ch;
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.52;
}

.sbs-home-hero {
  max-width: 1180px;
  margin-bottom: clamp(6rem, 12vw, 12rem);
  padding-top: clamp(1.25rem, 2vw, 2rem);
  border-top: 1px solid var(--sbs-black);
}

.sbs-home-hero .sbs-eyebrow {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.sbs-hero-title {
  max-width: 15ch;
  margin-top: 0;
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
  color: var(--sbs-black);
  font-family: var(--sbs-display);
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.sbs-hero-lead {
  max-width: 38ch;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.52;
}

.sbs-home-cta .wp-block-button__link {
  padding: 1rem 1.3rem;
}

/* Japanese Home: keep headline breaks aligned with semantic phrases. */
html[lang^="ja"] .sbs-home-hero .sbs-ja-line {
  display: block;
}

html[lang^="ja"] .sbs-workflow-pair + .sbs-workflow-pair::before {
  content: " → ";
}

html[lang^="ja"] .sbs-home-hero .sbs-hero-title,
html[lang^="ja"] .sbs-home-section h2,
html[lang^="ja"] .sbs-home-section h3 {
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

@media (max-width: 781px) {
  html[lang^="ja"] .sbs-home-hero .sbs-hero-title {
    max-width: none;
    font-size: clamp(1.6rem, 8vw, 2.5rem);
    line-height: 1.22;
  }

  html[lang^="ja"] .sbs-workflow-pair {
    display: block;
    white-space: nowrap;
  }

  html[lang^="ja"] .sbs-workflow-pair + .sbs-workflow-pair::before {
    content: "";
  }
}

.sbs-home-section {
  scroll-margin-top: 8rem;
  max-width: 980px;
  padding-top: clamp(1.25rem, 2vw, 2rem);
  border-top: 1px solid var(--sbs-line);
}

.sbs-home-section + .sbs-home-section {
  margin-top: clamp(5rem, 11vw, 10rem);
}

.sbs-home-section h2 {
  max-width: 17ch;
  margin-top: 0;
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.sbs-home-section > .wp-block-paragraph:not(.sbs-eyebrow) {
  max-width: 58ch;
  line-height: 1.68;
}

.sbs-home-section--principle {
  max-width: 1180px;
}

.sbs-home-section--principle > .wp-block-paragraph:not(.sbs-eyebrow) {
  max-width: 44ch;
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.52;
}

.sbs-scene-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 5vw, 5rem);
  border-top: 1px solid var(--sbs-black);
  border-bottom: 1px solid var(--sbs-black);
}

.sbs-scene-list.is-layout-flow > .sbs-scene {
  min-width: 0;
  min-height: 20rem;
  margin-block-start: 0 !important;
  padding: clamp(1.75rem, 4vw, 3.5rem);
}

.sbs-scene + .sbs-scene {
  border-left: 1px solid var(--sbs-black);
}

.sbs-scene:nth-child(2n + 1) {
  border-left: 0;
}

.sbs-scene:nth-child(n + 3) {
  border-top: 1px solid var(--sbs-black);
}

.sbs-scene-index {
  position: relative;
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem) !important;
  padding-left: 1.1rem;
  font-family: var(--sbs-meta);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-transform: lowercase;
}

.sbs-scene-index::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sbs-black);
}

.sbs-scene h3 {
  max-width: 16ch;
  min-height: 2.4em;
  margin-top: 0;
  margin-bottom: 1.25rem;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.16;
}

.sbs-scene p:last-child {
  max-width: 35ch;
  margin-bottom: 0;
  line-height: 1.62;
}

.sbs-next-step-panel {
  position: relative;
  padding: clamp(2rem, 6vw, 5rem);
  border: 2px solid var(--sbs-black);
  border-radius: 0;
  background: var(--sbs-black) !important;
  color: var(--sbs-white) !important;
}

.sbs-next-step-panel .sbs-eyebrow,
.sbs-next-step-panel h2,
.sbs-next-step-panel p {
  color: var(--sbs-white) !important;
}

.sbs-next-step-panel .sbs-eyebrow::before,
.sbs-next-step-panel .sbs-eyebrow::after {
  color: rgba(255, 255, 255, 0.45);
}

.sbs-next-step-panel h2 {
  max-width: 16ch;
  margin-top: 0;
  margin-bottom: 1.4rem;
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.sbs-next-step-panel p {
  max-width: 52ch;
  margin-bottom: 0;
  line-height: 1.62;
}

.sbs-next-step-panel .wp-block-button {
  margin-top: 1.25rem;
}

.sbs-next-step-panel .wp-block-button__link {
  border: 1px solid var(--sbs-white) !important;
  background: var(--sbs-white) !important;
  color: var(--sbs-black) !important;
}

.sbs-next-step-panel .wp-block-button__link:hover {
  background: var(--sbs-black) !important;
  color: var(--sbs-white) !important;
}

.wp-block-button__link {
  border: 1px solid var(--sbs-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 150ms ease, color 150ms ease;
}

.wp-block-button__link:hover {
  background: var(--sbs-white) !important;
  color: var(--sbs-black) !important;
}

/* Secondary (ghost) button — white ground, inverts on hover. */
.sbs-cta-secondary .wp-block-button__link {
  background: var(--sbs-white) !important;
  color: var(--sbs-black) !important;
}

.sbs-cta-secondary .wp-block-button__link:hover {
  background: var(--sbs-black) !important;
  color: var(--sbs-white) !important;
}

/* Starter Kit — the five notes rendered as wikilinked graph nodes. */
.sbs-kit-list {
  display: grid;
  gap: 0.5rem;
  max-width: 42ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sbs-meta);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.sbs-kit-list li {
  position: relative;
  margin: 0;
  padding: 0 0 0 1.25rem;
}

.sbs-kit-list li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sbs-black);
}

/* Article page: reading column plus a local-graph rail.
 *
 * WordPress's align="wide" support forces this block's box to the site's
 * full wide-size (1280px, `.is-layout-constrained > .alignwide`) and centers
 * it — the same rule every other alignwide element on the site gets. Left at
 * that width, the grid's two fixed-measure tracks (720 + 320) don't fill it,
 * so the leftover became either a dead zone stranded past the rail (packed
 * left) or, worse, a canyon swallowed into the one gap between the columns
 * (space-between) — both read as broken rather than balanced.
 *
 * The actual fix is to stop fighting the box size and shrink it to exactly
 * what the two columns need, so it centers the way every other alignwide
 * block on the site does (Home's content map, the hero) rather than
 * stretching to fill 1280 on its own. Leftover width then becomes ordinary,
 * symmetric outer margin — which also keeps the reading column's distance
 * from the decorative rule at a constant ~80px on any desktop width, instead
 * of the two nearly touching (the bug the title's overlap made visible).
 * !important is required: WP's own alignwide rule is more specific
 * (.is-layout-constrained > .alignwide, two classes) than a single class here.
 */
.sbs-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 320px);
  gap: clamp(2.5rem, 5vw, 5rem);
  max-width: calc(720px + clamp(2.5rem, 5vw, 5rem) + 320px) !important;
  align-items: start;
}

/* The block editor's flow-layout support assumes vertical stacking and gives
   the second child a margin-block-start (WP core: `:where(.is-layout-flow) >
   *`) meant as the gap between stacked blocks. Repurposing this container as
   a grid turns that into a stray top offset on the rail alone, which knocks
   its hairline out of alignment with the body's. Grid children should start
   flush with the row instead. */
.sbs-article-layout > * {
  margin-block-start: 0;
}

.sbs-article-body {
  min-width: 0;
}

.sbs-article-aside {
  position: sticky;
  top: 130px;
  min-width: 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--sbs-black);
}

.sbs-article-aside .sbs-eyebrow {
  margin: 0 0 0.75rem;
}

/* Posts that are not part of the synced graph render no graph at all; hide the
   rail entirely rather than leaving a stray label. */
.sbs-article-aside:not(:has(.sbs-graph)) {
  display: none;
}

@media (max-width: 1100px) {
  .sbs-article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sbs-article-aside {
    position: static;
    max-width: 720px;
    margin-top: clamp(3rem, 6vw, 5rem);
  }
}

.sbs-post-navigation {
  gap: 1rem;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: 1.35rem;
  border-top: 2px solid var(--sbs-black);
  font-family: var(--sbs-meta);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
}

.sbs-footer-shell {
  border-top: 1px solid var(--sbs-black);
  background: var(--sbs-black);
  color: var(--sbs-white);
}

.sbs-footer-inner {
  min-height: 280px;
  padding-top: clamp(2.75rem, 7vw, 6rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  gap: 2rem;
}

.sbs-footer-brand {
  max-width: 620px;
}

.sbs-footer-brand .wp-block-site-title,
.sbs-footer-brand .wp-block-site-title a {
  margin-bottom: 0.9rem;
  color: var(--sbs-white) !important;
  font-family: var(--sbs-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-decoration: none;
  text-transform: uppercase;
}

.sbs-footer-brand .wp-block-site-tagline {
  max-width: 30rem;
  color: var(--sbs-white);
  font-family: var(--sbs-meta);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.55;
}

.sbs-footer-meta {
  color: var(--sbs-white);
  font-family: var(--sbs-meta);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.sbs-footer-navigation {
  color: var(--sbs-white);
  font-family: var(--sbs-meta);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.sbs-footer-navigation .sbs-navigation-list {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sbs-footer-navigation .wp-block-navigation-item__content {
  color: var(--sbs-white) !important;
  text-decoration: none;
}

.sbs-footer-navigation .wp-block-navigation-item__content:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--sbs-black);
  outline-offset: 3px;
}

.sbs-footer-shell :where(a, button, input, textarea, select):focus-visible,
.sbs-next-step-panel :where(a, button, input, textarea, select):focus-visible {
  outline-color: var(--sbs-white);
}

@media (max-width: 781px) {
  .sbs-header-inner {
    min-height: 72px;
    gap: 0.75rem;
  }

  .sbs-header-tagline {
    display: none;
  }

  .sbs-primary-navigation > .sbs-navigation-list--desktop {
    display: none;
  }

  .sbs-navigation-mobile {
    position: relative;
    display: block;
  }

  .sbs-navigation-mobile > summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--sbs-black);
    color: var(--sbs-black);
    cursor: pointer;
    list-style: none;
  }

  .sbs-navigation-mobile > summary::-webkit-details-marker {
    display: none;
  }

  .sbs-navigation-mobile > summary::after {
    content: "+";
    font-size: 1rem;
    line-height: 1;
  }

  .sbs-navigation-mobile[open] > summary::after {
    content: "−";
  }

  .sbs-navigation-mobile-panel {
    position: absolute;
    top: calc(100% + 0.7rem);
    right: 0;
    box-sizing: border-box;
    width: min(22rem, calc(100vw - 2rem));
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    padding: 1.5rem;
    border: 1px solid var(--sbs-black);
    background: var(--sbs-black);
    color: var(--sbs-white);
  }

  .sbs-navigation-mobile:not([open]) > .sbs-navigation-mobile-panel {
    display: none;
  }

  .sbs-navigation-mobile[open] > .sbs-navigation-mobile-panel {
    display: block;
  }

  .sbs-navigation-mobile .sbs-navigation-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .sbs-navigation-mobile .wp-block-navigation-item__content,
  .sbs-navigation-mobile .sbs-language-link,
  .sbs-navigation-mobile .sbs-language-current {
    color: var(--sbs-white) !important;
  }

  .sbs-navigation-mobile-panel :where(a, button):focus-visible {
    outline-color: var(--sbs-white);
  }

  .sbs-main::before {
    left: 0.8rem;
  }

  .sbs-page-title,
  .sbs-article-title,
  .sbs-listing-header .wp-block-query-title {
    max-width: 12ch;
    line-height: 1.04;
  }

  .sbs-home-hero {
    margin-bottom: clamp(4.5rem, 18vw, 7rem);
  }

  .sbs-hero-title {
    max-width: 16ch;
    font-size: clamp(2.25rem, 9vw, 3.25rem);
    line-height: 1.1;
  }

  .sbs-home-section + .sbs-home-section {
    margin-top: clamp(4rem, 16vw, 6rem);
  }

  .sbs-home-section h2 {
    max-width: 12ch;
    line-height: 1.05;
  }

  .sbs-scene-list {
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
  }

  .sbs-scene-list.is-layout-flow > .sbs-scene {
    min-height: 0;
    padding: 1.5rem 0;
  }

  .sbs-scene + .sbs-scene {
    border-top: 1px solid var(--sbs-black);
    border-left: 0;
  }

  .sbs-scene h3 {
    min-height: 0;
  }

  .sbs-scene-index {
    margin-bottom: 1.5rem !important;
  }

  .sbs-post-card {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .sbs-post-card > .wp-block-post-date,
  .sbs-post-card .wp-block-post-title,
  .sbs-post-card .wp-block-post-excerpt,
  .sbs-post-card .wp-block-read-more {
    grid-column: 1;
  }

  .sbs-footer-inner {
    min-height: auto;
  }

  .sbs-footer-navigation {
    width: 100%;
  }

  .sbs-footer-navigation .sbs-navigation-list {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Japanese Home preview: CJK-specific editorial typesetting. */
.sbs-main--ja-preview {
  --sbs-japanese: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif;
  font-family: var(--sbs-japanese);
}

.sbs-main--ja-preview .sbs-eyebrow,
.sbs-main--ja-preview .sbs-hero-title,
.sbs-main--ja-preview .sbs-hero-lead,
.sbs-main--ja-preview .sbs-home-section h2,
.sbs-main--ja-preview .sbs-home-section > .wp-block-paragraph:not(.sbs-eyebrow),
.sbs-main--ja-preview .sbs-scene-index,
.sbs-main--ja-preview .sbs-scene h3,
.sbs-main--ja-preview .sbs-scene p:last-child,
.sbs-primary-navigation--locale .wp-block-navigation-item__content,
.sbs-footer-navigation--locale .wp-block-navigation-item__content {
  font-family: var(--sbs-japanese);
}

/* Japanese: modern gothic display (Zen Kaku) for headlines. */
.sbs-main--ja-preview .sbs-hero-title,
.sbs-main--ja-preview .sbs-hero-line,
.sbs-main--ja-preview .sbs-home-section h2,
.sbs-main--ja-preview .sbs-workflow-title,
.sbs-main--ja-preview .sbs-scene h3,
.sbs-main--ja-preview .sbs-next-step-panel h2,
.sbs-main--ja-preview .sbs-page-title,
.sbs-main--ja-preview .sbs-article-title {
  font-family: var(--sbs-japanese-display);
  font-weight: 700;
}

.sbs-main--ja-preview .sbs-eyebrow,
.sbs-main--ja-preview .sbs-scene-index {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  line-height: 1.5;
  text-transform: none;
}

.sbs-main--ja-preview .sbs-hero-title {
  max-width: 14em;
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: pretty;
}

.sbs-main--ja-preview .sbs-hero-lead {
  max-width: 31em;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: 0.015em;
  line-height: 1.75;
}

.sbs-main--ja-preview .sbs-home-section h2 {
  max-width: 15em;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.24;
  text-wrap: pretty;
}

.sbs-main--ja-preview .sbs-home-section > .wp-block-paragraph:not(.sbs-eyebrow) {
  max-width: 34em;
  letter-spacing: 0.015em;
  line-height: 1.8;
}

.sbs-main--ja-preview .sbs-home-section--principle > .wp-block-paragraph:not(.sbs-eyebrow) {
  max-width: 31em;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.75;
}

.sbs-main--ja-preview .sbs-scene h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.32;
}

.sbs-main--ja-preview .sbs-scene p:last-child {
  max-width: 27em;
  letter-spacing: 0.012em;
  line-height: 1.78;
}

.sbs-primary-navigation--locale .wp-block-navigation-item__content,
.sbs-footer-navigation--locale .wp-block-navigation-item__content {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.035em;
}

.sbs-primary-navigation--locale .sbs-navigation-current .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

@media (max-width: 781px) {
  .sbs-main--ja-preview .sbs-hero-title {
    max-width: 100%;
    font-size: clamp(2.1rem, 8vw, 3rem);
    line-height: 1.32;
  }

  .sbs-main--ja-preview .sbs-home-section h2 {
    max-width: 100%;
    font-size: clamp(1.7rem, 6.5vw, 2.4rem);
    line-height: 1.36;
  }
}

/* Japanese Home preview: keep semantic headline units intact at intermediate widths. */
.sbs-main--ja-preview .sbs-home-section--workflow .sbs-workflow-title {
  max-width: none;
  font-size: clamp(1.55rem, 3.2vw, 2.6rem);
  line-height: 1.3;
  white-space: nowrap;
}

@media (min-width: 782px) and (max-width: 1024px) {
  .sbs-main--ja-preview .sbs-hero-title {
    max-width: 100%;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.3;
  }
}

@media (max-width: 781px) {
  .sbs-main--ja-preview .sbs-hero-title {
    font-size: clamp(2rem, 7vw, 2.6rem);
  }

  .sbs-main--ja-preview .sbs-home-section--workflow .sbs-workflow-title {
    font-size: clamp(1.4rem, 5.5vw, 1.9rem);
    line-height: 1.34;
  }
}

/* Japanese Home preview: preserve the requested semantic units in the Hero. */
.sbs-main--ja-preview .sbs-hero-title {
  max-width: none;
  text-wrap: initial;
}

.sbs-main--ja-preview .sbs-hero-line {
  display: block;
  white-space: nowrap;
  line-height: 1.05;
}

.sbs-main--ja-preview .sbs-hero-line--statement {
  margin-block: 0.2em 0.22em;
  font-size: clamp(1.5rem, 4.6vw, 2.75rem);
  letter-spacing: 0.005em;
  line-height: 1.3;
}

/* About page: compact the title plate and establish a single editorial reading axis. */
.sbs-main--about {
  padding-top: clamp(2.75rem, 6vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

.sbs-main--about .sbs-about-header {
  max-width: 720px;
  margin-bottom: clamp(2.75rem, 5vw, 4.75rem);
  padding-top: 0.9rem;
  border-top: 1px solid var(--sbs-black);
}

.sbs-main--about .sbs-about-title {
  max-width: none;
  margin: 0;
  font-size: clamp(2.75rem, 5vw, 4.5rem) !important;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

.sbs-main--about .sbs-about-content,
.sbs-main--about .sbs-about-intro,
.sbs-main--about .sbs-about-section {
  max-width: 720px;
}

.sbs-main--about .sbs-about-content > .wp-block-group,
.sbs-main--about .sbs-about-intro,
.sbs-main--about .sbs-about-section,
.sbs-main--about .sbs-about-intro > *,
.sbs-main--about .sbs-about-section > * {
  margin-inline: 0 !important;
}

.sbs-main--about .sbs-about-intro,
.sbs-main--about .sbs-about-section {
  padding-top: 1rem;
  border-top: 1px solid var(--sbs-black);
}

.sbs-main--about .sbs-about-intro + .sbs-about-section {
  margin-top: clamp(3.5rem, 8vw, 6.75rem);
}

.sbs-main--about .sbs-about-section + .sbs-about-section {
  margin-top: clamp(3.25rem, 7vw, 6.5rem);
}

.sbs-main--about .sbs-eyebrow {
  margin-bottom: 1rem !important;
}

.sbs-main--about .sbs-about-intro h2 {
  max-width: 14ch;
  margin-top: 0;
  margin-bottom: clamp(1.35rem, 2vw, 1.8rem);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.sbs-main--about .sbs-about-section h2 {
  max-width: 18ch;
  margin-top: 0;
  margin-bottom: clamp(1.1rem, 1.8vw, 1.5rem);
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
}

.sbs-main--about .sbs-about-section--safety h2 {
  max-width: 14ch;
  text-wrap: initial;
}

.sbs-main--about .sbs-about-intro .wp-block-paragraph:not(.sbs-eyebrow) {
  max-width: 54ch;
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.54;
}

.sbs-main--about .sbs-about-section .wp-block-paragraph:not(.sbs-eyebrow) {
  max-width: 54ch;
  line-height: 1.7;
}

.sbs-main--about .sbs-about-section--safety .wp-block-paragraph:not(.sbs-eyebrow) {
  max-width: 52ch;
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.54;
}

@media (max-width: 781px) {
  .sbs-main--about {
    padding-top: clamp(2.5rem, 10vw, 4rem);
  }

  .sbs-main--about .sbs-about-title {
    font-size: clamp(2.4rem, 10vw, 3.25rem) !important;
  }

  .sbs-main--about .sbs-about-intro h2 {
    font-size: clamp(2rem, 8.5vw, 2.85rem);
  }

  .sbs-main--about .sbs-about-section h2 {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
  }
}

/* Blog listing: keep category and date together as a compact card meta column. */
.sbs-post-card-meta {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  align-content: start;
  gap: 0.45rem;
}

.sbs-post-card-meta .wp-block-post-terms,
.sbs-post-card-meta .wp-block-post-terms a,
.sbs-post-card-meta .wp-block-post-date {
  color: inherit !important;
  font-family: var(--sbs-meta);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-decoration: none;
  text-transform: uppercase;
}

.sbs-post-card-meta .wp-block-post-terms a:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

@media (max-width: 781px) {
  .sbs-post-card-meta {
    grid-column: 1;
    grid-row: auto;
  }
}

/* ============================================================
   [sbs_graph] shortcode — the force-directed article graph.
   Same monochrome visual language as the hero graph above.
   ============================================================ */

.sbs-graph {
  position: relative;
  max-width: 1180px;
}

.sbs-graph-canvas {
  position: relative;
  display: none;
}

.sbs-graph--ready .sbs-graph-canvas {
  display: block;
  /* Both set by the shortcode's width/height attributes. max-width keeps an
     over-large px value from breaking out of its column. */
  width: var(--sbs-graph-w, 100%);
  max-width: 100%;
  height: var(--sbs-graph-h, 560px);
  /* An outline rather than a border: it frames the exact area the graph is
     clipped to without taking part in layout, so the box the simulation was
     measured against stays the box that is drawn. Same weight as an edge, so
     the frame reads as part of the graph rather than as a UI panel. */
  outline: 1px solid var(--sbs-line);
}

.sbs-graph-canvas svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sbs-graph-node {
  text-decoration: none;
}

/* Filled with the page colour rather than left transparent: a free node reads
   as an outline either way, but an unfilled circle lets every edge run
   straight through its middle. */
.sbs-graph-node circle {
  fill: var(--sbs-white);
  stroke: var(--sbs-black);
  stroke-width: 1.4px;
}

.sbs-graph-node--paid circle {
  fill: var(--sbs-black);
}

/* Keep the map on the same 720px reading measure as the surrounding home
   content. The labels remain collision-aware; a wider canvas made the graph
   feel harder to pan and inspect as one object. */
.sbs-home-section--map .sbs-graph {
  max-width: none !important;
  width: 100%;
}

/* Arrival: the layout is already settled when it is first painted, so nothing
   moves — the graph simply appears, edges first. Skipped under reduced motion,
   where the class is never added.

   Deliberately no `backwards`/`forwards` fill and no opacity on the base rule:
   if the animation never runs (a background tab, a browser that throttles it),
   the elements keep their normal opacity and the graph is simply visible with
   no entrance. Never invisible. */
@keyframes sbs-graph-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sbs-graph-canvas svg.sbs-graph--enter line {
  animation: sbs-graph-appear 0.55s ease;
}

.sbs-graph-canvas svg.sbs-graph--enter .sbs-graph-node {
  animation: sbs-graph-appear 0.5s ease 0.2s;
}

/* Semantic zoom swaps layers without blanking the canvas. Both SVGs occupy
   the same fixed canvas only while the old one fades out and the new one
   fades in; JavaScript removes the old layer when this transition finishes. */
.sbs-graph-canvas svg.sbs-graph-layer--transitioning {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s ease-in-out;
}

.sbs-graph-canvas svg.sbs-graph-layer--incoming,
.sbs-graph-canvas svg.sbs-graph-layer--outgoing {
  opacity: 0;
}

.sbs-graph-canvas svg.sbs-graph-layer--outgoing {
  pointer-events: none;
}

/* "You are here": the article currently being read, ringed so it reads as the
   centre of its own neighbourhood. Monochrome — weight, not colour. */
.sbs-graph-node--here circle {
  stroke-width: 3px;
}

.sbs-graph-node--here text {
  font-weight: 700;
}

.sbs-graph-node text {
  font-family: var(--sbs-meta);
  font-size: 11px;
  fill: var(--sbs-black);
  opacity: 0;
  /* The label is part of its node's hit area: readers aim at the words, not
     at a 9px circle. */
  pointer-events: auto;
  cursor: pointer;
}

/* Direct manipulation affordances. */
.sbs-graph-canvas svg {
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Dragging the graph would otherwise open a text selection. The labels
   themselves are unselectable, so the browser anchors that selection to the
   nearest selectable text instead — the visually hidden fallback list — and
   paints a blue highlight across it. Scoped to the ready state so the plain
   list stays selectable when JavaScript never runs. */
.sbs-graph--ready {
  user-select: none;
  -webkit-user-select: none;
}

/* Transparent, but still hit-testable: `fill: none` would not be. */
.sbs-graph-plate {
  fill: transparent;
}

/* Needs to out-specify `.sbs-graph-node circle { fill: none }` above —
   `fill: none` would leave this disc unhittable, which is the whole point. */
.sbs-graph-node circle.sbs-graph-hit {
  fill: transparent;
  stroke: none;
}

.sbs-graph-canvas svg.is-grabbing {
  cursor: grabbing;
}

.sbs-graph-node {
  cursor: pointer;
}

.sbs-graph-canvas svg.sbs-graph--labeled .sbs-graph-node text {
  opacity: 1;
}

.sbs-graph-node:hover text,
.sbs-graph-node:focus-visible text {
  opacity: 1;
}

/* No focus ring on a graph node: the site-wide outline would sit at an odd
   distance from a circle, and the browser's own ring is blue, which this
   design does not use anywhere. Focus is already unmistakable — reaching a
   node dims every other node and reveals its label, exactly as hover does. */
.sbs-graph-node:focus,
.sbs-graph-node:focus-visible {
  outline: none;
}

.sbs-graph-edge {
  fill: none;
  stroke: var(--sbs-line);
  stroke-width: 1.1px;
  /* Edges are drawn over the nodes and would otherwise swallow the pointer
     right at a node's centre. Nothing about an edge is interactive. */
  pointer-events: none;
}

.sbs-graph-canvas svg.sbs-graph--dim .sbs-graph-node,
.sbs-graph-canvas svg.sbs-graph--dim .sbs-graph-edge {
  opacity: 0.18;
}

.sbs-graph-canvas svg.sbs-graph--dim .sbs-graph-node.is-active,
.sbs-graph-canvas svg.sbs-graph--dim .sbs-graph-edge.is-active {
  opacity: 1;
}

/* Always-in-the-DOM link list: the no-JS/SEO/screen-reader fallback. Hidden
   visually (not display:none) once the graph takes over. */
.sbs-graph-fallback {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sbs-graph--ready .sbs-graph-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 781px) {
  .sbs-graph--ready .sbs-graph-canvas {
    display: none;
  }

  .sbs-graph--ready .sbs-graph-fallback {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}