:root {
  --paper: #f8f5ef;
  --paper-strong: #fffdf9;
  --ink: #181716;
  --muted: #6e6963;
  --line: rgba(62, 51, 43, 0.15);
  --red: #a82822;
  --red-dark: #7c1716;
  --plum: #6d526f;
  --brass: #a07a38;
  --lilac: #efebef;
  --shadow: 0 18px 55px rgba(69, 48, 33, 0.09);
  --shadow-small: 0 9px 24px rgba(69, 48, 33, 0.1);
  --radius: 18px;
  --sans: "Source Han Serif SC", "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", STSong, serif;
  --serif: "Source Han Serif SC", "Noto Serif SC", "Noto Serif CJK SC", "Songti SC", STSong, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 2%, rgba(168, 40, 34, 0.035), transparent 24rem),
    radial-gradient(circle at 92% 28%, rgba(109, 82, 111, 0.04), transparent 27rem),
    var(--paper);
  font-family: var(--sans);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
button { font: inherit; }

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

.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: -60px;
  padding: 10px 14px;
  color: #fff;
  background: var(--red-dark);
  border-radius: 8px;
  transition: top 160ms ease;
}
.skip-link:focus { top: 16px; }

.section-shell,
.site-header { width: min(1260px, calc(100% - 48px)); margin-inline: auto; }

.site-header {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand { display: inline-flex; align-items: baseline; letter-spacing: -0.04em; }
.brand-main { color: var(--red-dark); font: 700 1.48rem/1 var(--serif); }
.brand-sub { font: 500 1.34rem/1 var(--serif); }

.primary-nav { display: flex; align-items: center; gap: 42px; }
.primary-nav a { position: relative; padding: 28px 0 24px; font-size: 0.92rem; }
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 18px;
  height: 2px;
  background: var(--red);
  transition: right 180ms ease;
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after { right: 0; }

.menu-toggle { display: none; border: 0; background: none; padding: 10px; }
.menu-toggle > span:not(.sr-only) { display: block; width: 24px; height: 1px; margin: 6px; background: var(--ink); }

.hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 50px;
  padding-block: 72px 92px;
}

.kicker {
  margin: 0 0 20px;
  color: var(--red-dark);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.14em;
}
.kicker > span { display: inline-block; width: 22px; height: 1px; margin: 0 8px 3px 0; background: currentColor; }

.hero h1,
.section-heading h2,
.portfolio-copy h2,
.evidence-panel h2,
.about-section h2 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero h1 { margin: 0; font-size: clamp(3.6rem, 5vw, 5rem); line-height: 1.08; }
.hero-nowrap { white-space: nowrap; }
.hero h1::after { content: ""; display: block; width: 34px; height: 3px; margin-top: 25px; background: var(--red); }
.hero-lede { max-width: 530px; margin: 27px 0 33px; color: #494542; font-size: 1.05rem; line-height: 1.9; }

.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 50px;
  padding: 6px 11px 6px 24px;
  color: #fff;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(124, 23, 22, 0.2);
  font-size: 0.93rem;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.button-arrow { width: 42px; height: 32px; object-fit: contain; transition: transform 180ms ease; }
.primary-button:hover,
.primary-button:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(124, 23, 22, 0.27); }
.primary-button:hover .button-arrow,
.primary-button:focus-visible .button-arrow { transform: translateX(3px); }

.method-orbit { position: relative; width: min(100%, 530px); aspect-ratio: 1; margin-inline: auto; }
.orbit-ring { position: absolute; border: 1px dashed rgba(160, 122, 56, 0.38); border-radius: 50%; }
.orbit-ring-one { inset: 14%; }
.orbit-ring-two { inset: 29%; border-color: rgba(109, 82, 111, 0.22); }
.idea-spark { position: absolute; inset: 39%; display: grid; place-items: center; }
.idea-spark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(124,23,22,.18)); }

.orbit-node {
  position: absolute;
  width: 152px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 10px 14px;
  text-align: center;
  background: rgba(255, 253, 249, 0.88);
  border: 1px solid rgba(105, 83, 66, 0.14);
  border-radius: 24px;
  box-shadow: var(--shadow-small);
  backdrop-filter: blur(10px);
  transition: transform 180ms ease, border-color 180ms ease;
}
.orbit-node:hover,
.orbit-node:focus-visible { transform: translateY(-4px); border-color: rgba(168, 40, 34, 0.36); }
.orbit-node b { font-size: 0.78rem; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.orbit-node-1 { left: calc(50% - 76px); top: -2%; }
.orbit-node-2 { left: 0; top: 18%; }
.orbit-node-3 { right: 0; top: 18%; }
.orbit-node-4 { left: 2%; bottom: 10%; }
.orbit-node-5 { right: 2%; bottom: 10%; }
.orbit-node-6 { left: calc(50% - 76px); bottom: -2%; }

.method-icon { width: 64px; height: 64px; display: inline-grid; place-items: center; }
.method-icon img { width: 100%; height: 100%; object-fit: contain; }
.icon-red { color: var(--red); }
.icon-plum { color: var(--plum); }
.icon-brass { color: var(--brass); }

.methods-section { padding: 88px 0 108px; background: rgba(255, 253, 249, 0.66); border-block: 1px solid rgba(62, 51, 43, 0.08); }
.section-heading { max-width: 760px; margin-bottom: 50px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading.compact { margin-bottom: 30px; }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 3.5vw, 3.35rem); line-height: 1.2; }
.section-heading > p:last-child { max-width: 660px; margin: 18px auto 0; color: var(--muted); }

.method-families { display: grid; grid-template-columns: 3.25fr 1.45fr 2.3fr; gap: 22px; align-items: stretch; }
.method-family { display: flex; flex-direction: column; }
.family-heading { margin-bottom: 16px; padding: 0 2px 11px; border-bottom: 2px solid currentColor; color: var(--red); text-align: center; }
.family-build .family-heading { color: var(--brass); }
.family-support .family-heading { color: var(--plum); }
.family-heading span { color: currentColor; font-size: 0.82rem; }
.family-grid { flex: 1; display: grid; gap: 12px; }
.family-grid-three { grid-template-columns: repeat(3, 1fr); }
.family-grid-two { grid-template-columns: repeat(2, 1fr); }

.method-card {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 7px;
  padding: 22px 14px 20px;
  background: var(--paper-strong);
  border: 1px solid rgba(105, 83, 66, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(69, 48, 33, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.method-card:hover,
.method-card:focus-visible { transform: translateY(-4px); border-color: rgba(168, 40, 34, 0.25); box-shadow: var(--shadow-small); }
.method-card .method-icon { margin-bottom: auto; width: 72px; height: 72px; }
.method-card strong { font-family: var(--serif); font-size: 0.94rem; line-height: 1.35; letter-spacing: -0.02em; white-space: nowrap; }
.method-card small { max-width: 100%; color: var(--muted); font-size: 0.7rem; line-height: 1.65; text-wrap: balance; }
.method-card-featured { min-height: 100%; }

.portfolio-section { display: grid; grid-template-columns: 0.55fr 1.45fr; gap: 56px; align-items: center; padding-block: 120px; }
.portfolio-copy h2 { margin: 0; font-size: clamp(2.6rem, 4.6vw, 4.3rem); line-height: 1.18; }
.portfolio-copy > p:not(.kicker) { max-width: 440px; color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--red-dark); font-weight: 650; }
.link-arrow { width: 34px; height: 23px; object-fit: contain; transition: transform 180ms ease; }
.text-link:hover .link-arrow { transform: translateX(4px); }

.portfolio-map { width: 100%; overflow-x: auto; }
.portfolio-map svg { min-width: 760px; }
.portfolio-map .map-band { fill: rgba(109,82,111,.06); stroke: rgba(109,82,111,.2); }
.portfolio-map .map-band-title { fill: var(--plum); font: 600 15px/1 var(--serif); letter-spacing: .04em; }
.portfolio-map .map-arrow { stroke: var(--muted); stroke-width: 1.4; }
.portfolio-map .map-return { fill: none; stroke: var(--red); stroke-width: 1.5; }
.portfolio-map .map-arrow-label { fill: var(--muted); font: 500 12px/1 var(--serif); text-anchor: middle; }
.portfolio-map .map-arrow-label-red,
.portfolio-map .map-return-label { fill: var(--red-dark); }
.portfolio-map .map-return-mask { fill: var(--paper); }
.portfolio-map .map-return-label { font: 600 13px/1 var(--serif); text-anchor: middle; }
.portfolio-map .map-node > rect:first-child { fill: var(--paper-strong); stroke: rgba(62,51,43,.24); stroke-width: 1.2; }
.portfolio-map .map-node-hub > rect:first-child { fill: rgba(168,40,34,.035); stroke: rgba(168,40,34,.42); }
.portfolio-map .map-node-focal > rect:first-child { fill: rgba(168,40,34,.065); stroke: var(--red); stroke-width: 1.4; }
.portfolio-map .map-node-store > rect:first-child { fill: rgba(109,82,111,.055); stroke: rgba(109,82,111,.38); }
.portfolio-map .map-tag { fill: var(--muted); font: 600 9px/1 var(--serif); letter-spacing: .1em; }
.portfolio-map .map-title { fill: var(--ink); font: 650 17px/1 var(--serif); text-anchor: middle; }
.portfolio-map .project-token { fill: rgba(160,122,56,.07); stroke: rgba(160,122,56,.18); }
.portfolio-map .project-token-active { fill: rgba(168,40,34,.07); stroke: rgba(168,40,34,.28); }
.portfolio-map .project-dot { fill: var(--red); stroke: none; }
.portfolio-map .project-dot.soft { fill: var(--brass); }
.portfolio-map .project-dot.plum { fill: var(--plum); }
.portfolio-map .token-text,
.portfolio-map .agent-text,
.portfolio-map .check-text { fill: var(--muted); font: 500 11px/1 var(--serif); }
.portfolio-map .mini-chip { fill: rgba(160,122,56,.08); stroke: rgba(160,122,56,.22); }
.portfolio-map .chip-text { fill: var(--brass); font: 600 11px/1 var(--serif); text-anchor: middle; }
.portfolio-map .agent-lane { fill: rgba(168,40,34,.08); stroke: rgba(168,40,34,.2); }
.portfolio-map .check-box { fill: rgba(109,82,111,.06); stroke: rgba(109,82,111,.35); }
.portfolio-map .check-mark { fill: none; stroke: var(--plum); stroke-width: 1.6; }
.portfolio-map .writeback-item { fill: rgba(109,82,111,.07); stroke: rgba(109,82,111,.2); }
.portfolio-map .writeback-text { fill: var(--plum); font: 600 12px/1 var(--serif); text-anchor: middle; }

.creative-previews { padding-block: 30px 110px; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.preview-card { margin: 0; overflow: hidden; background: var(--paper-strong); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 35px rgba(69, 48, 33, 0.06); }
.preview-image { aspect-ratio: 1.84; overflow: hidden; background: #eee9e1; }
.preview-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.preview-card:hover img { transform: scale(1.025); }
.preview-card figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 20px 22px 22px; }
.preview-card figcaption span { color: var(--red-dark); font-size: 0.76rem; }
.preview-card figcaption strong { font: 700 1.15rem/1.4 var(--serif); text-align: right; }

.evidence-section { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 120px; }
.evidence-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 36px 40px; background: rgba(255, 253, 249, 0.78); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 36px rgba(69, 48, 33, 0.05); }
.evidence-panel header { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.evidence-panel header > span { color: var(--red-dark); font-size: 0.74rem; }
.evidence-panel h2 { margin: 5px 0 0; font-size: clamp(1.55rem, 2.7vw, 2.3rem); line-height: 1.3; }
.evidence-panel > p { margin: 20px 0 0; color: var(--muted); font-size: 0.9rem; }

.library-map { width: 100%; margin-top: 26px; overflow-x: auto; }
.library-map svg { min-width: 820px; }
.library-map .library-stage { fill: var(--muted); font: 650 12px/1 var(--serif); letter-spacing: .08em; }
.library-map .library-stage-focal { fill: var(--plum); }
.library-map .library-arrow { fill: none; stroke: var(--muted); stroke-width: 1.25; }
.library-map .library-source > rect,
.library-map .library-intake > rect,
.library-map .library-card > rect:first-child,
.library-map .library-output > rect:first-child { fill: var(--paper-strong); stroke: rgba(62,51,43,.23); stroke-width: 1.15; }
.library-map .library-card.card-knowledge > rect:first-child { fill: rgba(168,40,34,.04); stroke: rgba(168,40,34,.38); }
.library-map .obsidian-vault > rect { fill: rgba(109,82,111,.045); stroke: rgba(109,82,111,.42); stroke-width: 1.3; }
.library-map .library-node-title { fill: var(--ink); font: 650 15px/1 var(--serif); text-anchor: middle; }
.library-map .library-node-sub { fill: var(--muted); font: 500 10px/1 var(--serif); text-anchor: middle; }
.library-map .source-paper { fill: #f2eadf; stroke: rgba(160,122,56,.26); }
.library-map .source-paper-red { fill: rgba(168,40,34,.1); stroke: rgba(168,40,34,.34); }
.library-map .source-paper-plum { fill: rgba(109,82,111,.1); stroke: rgba(109,82,111,.3); }
.library-map .source-label { fill: var(--ink); font: 550 10px/1 var(--serif); text-anchor: middle; }
.library-map .intake-step { fill: rgba(160,122,56,.055); stroke: rgba(160,122,56,.25); }
.library-map .intake-label { fill: var(--muted); font: 550 11px/1 var(--serif); text-anchor: middle; }
.library-map .card-tab { fill: rgba(160,122,56,.14); stroke: none; }
.library-map .card-knowledge .card-tab { fill: rgba(168,40,34,.13); }
.library-map .card-project .card-tab { fill: rgba(109,82,111,.12); }
.library-map .card-tab-text { fill: var(--brass); font: 650 8px/1 var(--serif); text-anchor: middle; }
.library-map .card-knowledge .card-tab-text { fill: var(--red-dark); }
.library-map .card-project .card-tab-text { fill: var(--plum); }
.library-map .vault-dot { fill: var(--plum); stroke: none; }
.library-map .vault-title { fill: var(--plum); font: 700 11px/1 var(--serif); letter-spacing: .07em; }
.library-map .vault-sub { fill: var(--red-dark); font: 600 10px/1 var(--serif); }
.library-map .backlink { fill: none; stroke: rgba(109,82,111,.5); stroke-width: 1.2; }
.library-map .backlink-focal { stroke: var(--red); stroke-width: 1.4; }
.library-map .graph-node { fill: #b69a73; stroke: var(--paper-strong); stroke-width: 5; }
.library-map .graph-node-red { fill: var(--red); }
.library-map .graph-node-plum { fill: var(--plum); }
.library-map .graph-node-brass { fill: var(--brass); }
.library-map .graph-label { fill: var(--ink); font: 550 10px/1 var(--serif); text-anchor: middle; }
.library-map .library-output > rect:first-child { fill: rgba(168,40,34,.035); stroke: rgba(168,40,34,.28); }
.library-map .output-chip { fill: var(--paper-strong); stroke: rgba(160,122,56,.3); }
.library-map .output-label { fill: var(--red-dark); font: 650 10px/1 var(--serif); text-anchor: middle; }

.lab-image { flex: 1; min-height: 330px; display: grid; place-items: center; margin-top: 24px; overflow: hidden; border-radius: 13px; background: #e9e6e1; }
.lab-image img { width: 100%; height: auto; object-fit: contain; }
#visual-lab { display: grid; grid-template-columns: .66fr 1.34fr; grid-template-rows: auto 1fr; column-gap: 42px; align-items: start; }
#visual-lab header { grid-column: 1; grid-row: 1; }
#visual-lab .lab-image { grid-column: 2; grid-row: 1 / 3; margin-top: 0; min-height: 0; }
#visual-lab > p { grid-column: 1; grid-row: 2; }

.about-section {
  min-height: 350px;
  display: grid;
  grid-template-columns: 0.42fr 1.58fr;
  align-items: center;
  gap: 54px;
  margin-bottom: 80px;
  padding: 56px 70px;
  background: linear-gradient(135deg, rgba(239, 235, 239, 0.95), rgba(255, 253, 249, 0.9));
  border: 1px solid rgba(109, 82, 111, 0.1);
  border-radius: var(--radius);
}
.about-mark { width: min(100%, 260px); aspect-ratio: 1; margin: auto; }
.about-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(69,48,33,.14)); }
.about-section h2 { margin: 0; font-size: clamp(2.2rem, 3.5vw, 3.35rem); line-height: 1.2; }
.about-flow { width: 100%; margin-top: 30px; overflow-x: auto; }
.about-flow svg { min-width: 600px; }
.about-flow .about-connector { fill: none; stroke: var(--muted); stroke-width: 1.25; }
.about-flow .about-source > rect,
.about-flow .about-result > rect { fill: var(--paper-strong); stroke: rgba(62,51,43,.22); stroke-width: 1.1; }
.about-flow .about-result > rect { fill: rgba(160,122,56,.055); stroke: rgba(160,122,56,.3); }
.about-flow .about-source text,
.about-flow .about-result text { fill: var(--ink); font: 650 13px/1 var(--serif); text-anchor: middle; }
.about-flow .about-core > rect:first-child { fill: rgba(168,40,34,.06); stroke: rgba(168,40,34,.45); stroke-width: 1.35; }
.about-flow .about-core > rect:not(:first-child) { fill: rgba(168,40,34,.18); stroke: none; }
.about-flow .about-core-kicker { fill: var(--red-dark); font: 650 8px/1 var(--serif); letter-spacing: .08em; text-anchor: middle; }
.about-flow .about-core-title { fill: var(--ink); font: 700 21px/1 var(--serif); text-anchor: middle; }

.site-footer { min-height: 125px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.site-footer div { display: flex; flex-direction: column; }
.site-footer strong { color: var(--red-dark); font: 700 1.4rem/1.2 var(--serif); }
.site-footer span,
.site-footer p { color: var(--muted); font-size: 0.76rem; }

:focus-visible { outline: 3px solid rgba(168, 40, 34, 0.32); outline-offset: 4px; }

@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy { max-width: 760px; }
  .method-orbit { width: min(100%, 560px); }
  .orbit-node { width: 142px; min-height: 124px; }
  .orbit-node-1,
  .orbit-node-6 { left: calc(50% - 71px); }
  .method-families { grid-template-columns: 1fr; }
  .family-grid-three { grid-template-columns: repeat(3, 1fr); }
  .family-build .method-card { min-height: 145px; }
  .portfolio-section { grid-template-columns: 1fr; gap: 20px; }
  .portfolio-copy { text-align: center; }
  .portfolio-copy > p:not(.kicker) { margin-inline: auto; }
  .evidence-section { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .section-shell,
  .site-header { width: min(100% - 28px, 680px); }
  .site-header { min-height: 68px; }
  .menu-toggle { display: block; position: relative; z-index: 20; }
  .primary-nav {
    position: fixed;
    z-index: 15;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    background: rgba(248,245,239,.98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: 180ms ease;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .primary-nav a { padding: 14px 24px; font: 700 1.7rem/1.2 var(--serif); }
  .hero { min-height: auto; grid-template-columns: 1fr; padding-block: 70px; }
  .hero h1 { font-size: clamp(3.3rem, 16vw, 5.1rem); }
  .method-orbit { width: min(100%, 480px); margin-top: 34px; }
  .orbit-node { width: 142px; min-height: 124px; padding: 10px 8px 12px; }
  .orbit-node b { font-size: 0.75rem; }
  .orbit-node .method-icon { width: 56px; height: 56px; }
  .methods-section { padding-block: 70px; }
  .family-grid-three,
  .family-grid-two { grid-template-columns: 1fr; }
  .method-card,
  .method-card-featured { min-height: 145px; }
  .portfolio-section { padding-block: 82px; }
  .portfolio-map svg { min-width: 720px; }
  .preview-grid { grid-template-columns: 1fr; }
  .preview-card figcaption { align-items: flex-start; flex-direction: column; }
  .preview-card figcaption strong { text-align: left; }
  .library-map svg { min-width: 760px; }
  .evidence-panel { min-height: auto; }
  #visual-lab { grid-template-columns: 1fr; grid-template-rows: auto; gap: 0; }
  #visual-lab header,
  #visual-lab .lab-image,
  #visual-lab > p { grid-column: 1; grid-row: auto; }
  #visual-lab .lab-image { margin-top: 24px; }
  .about-section { grid-template-columns: 1fr; gap: 28px; padding: 46px 30px; }
  .about-mark { width: 180px; }
  .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 14px; }
  .site-footer p { margin: 0; }
}

@media (max-width: 480px) {
  .method-orbit { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; aspect-ratio: auto; }
  .orbit-ring,
  .idea-spark { display: none; }
  .orbit-node { position: static; width: auto; min-height: 112px; border-radius: 18px; }
  .orbit-node .method-icon { width: 62px; height: 62px; }
  .hero-nowrap { white-space: normal; }
  .evidence-panel { padding: 20px; }
}

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

/* AI 多项目管理详情页 */
.primary-nav .is-current::after { right: 0; }
.detail-hero {
  min-height: 640px;
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  align-items: center;
  gap: 54px;
  padding-block: 74px 90px;
}
.breadcrumb { display: flex; gap: 10px; margin: 0 0 34px; color: var(--muted); font-size: .78rem; }
.breadcrumb a { color: var(--red-dark); }
.detail-hero h1 {
  margin: 0;
  font: 700 clamp(3.6rem, 6vw, 6rem)/1.08 var(--serif);
  letter-spacing: -.05em;
}
.detail-subtitle { margin: 24px 0 13px; color: var(--red-dark); font: 700 1.2rem/1.6 var(--serif); }
.detail-intro { max-width: 510px; color: var(--muted); }

.portfolio-sculpture { position: relative; min-height: 440px; }
.sculpture-orbit { position: absolute; border: 1px dashed rgba(160,122,56,.5); border-radius: 50%; }
.orbit-large { left: 5%; top: 2%; width: 390px; height: 390px; }
.orbit-small { left: 20%; top: 17%; width: 260px; height: 260px; border-color: rgba(109,82,111,.27); }
.sculpture-core {
  position: absolute;
  left: 29%; top: 36%;
  width: 145px; height: 145px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 25%, #fff, #eee8dd 65%, #d7c7ac);
  border: 9px solid rgba(255,253,249,.9);
  border-radius: 50%;
  box-shadow: 0 25px 55px rgba(69,48,33,.17), inset 0 0 0 1px rgba(160,122,56,.42);
}
.sculpture-core span { color: var(--muted); font-size: .68rem; }
.sculpture-core strong { font: 700 1.3rem/1.2 var(--serif); }
.project-token {
  position: absolute; width: 42px; height: 42px; display: block;
  background: radial-gradient(circle at 35% 25%, #d2bccd, var(--plum));
  border: 5px solid rgba(255,253,249,.9); border-radius: 50%; box-shadow: var(--shadow-small);
}
.token-a { left: 12%; top: 14%; }
.token-b { left: 7%; bottom: 18%; background: radial-gradient(circle at 35% 25%, #d8bc7c, var(--brass)); }
.token-c { left: 47%; top: 6%; background: radial-gradient(circle at 35% 25%, #e9e4dc, #938b80); }
.token-d { left: 49%; bottom: 10%; background: radial-gradient(circle at 35% 25%, #c8aabf, var(--plum)); }
.token-selected { left: 58%; top: 38%; width: 72px; height: 72px; z-index: 3; background: radial-gradient(circle at 35% 25%, #dc6153, var(--red-dark)); border-width: 8px; }
.execution-rail {
  position: absolute; left: 66%; right: 0; top: 42%;
  min-height: 78px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center;
  padding: 12px 14px 12px 28px;
  background: rgba(255,253,249,.85); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-small);
}
.execution-rail::after { content: ""; position: absolute; right: 16px; left: 35px; bottom: -52px; height: 50px; border-right: 1px dashed var(--red); border-bottom: 1px dashed var(--red); border-radius: 0 0 28px 0; }
.execution-rail span { position: relative; z-index: 1; display: grid; place-items: center; width: 45px; height: 45px; margin: auto; color: var(--red-dark); background: var(--paper-strong); border: 1px solid var(--line); border-radius: 50%; }
.execution-rail b { font-size: .62rem; }

.scales-section { padding-block: 80px 110px; }
.scale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.scale-card { min-height: 330px; display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 26px; padding: 38px; background: rgba(255,253,249,.8); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 38px rgba(69,48,33,.06); }
.scale-copy > span { color: var(--red); font: 700 .75rem/1 var(--serif); }
.scale-copy h3 { margin: 10px 0; font: 700 1.55rem/1.3 var(--serif); }
.scale-copy p { margin: 0; color: var(--muted); font-size: .83rem; }
.mini-orbit { position: relative; width: 210px; height: 210px; margin: auto; border: 1px dashed rgba(160,122,56,.55); border-radius: 50%; }
.mini-orbit::before { content: ""; position: absolute; inset: 28%; border: 1px solid rgba(109,82,111,.25); border-radius: 50%; }
.mini-orbit span { position: absolute; inset: 39%; background: var(--paper-strong); border: 1px solid var(--brass); border-radius: 50%; box-shadow: var(--shadow-small); }
.mini-orbit i { position: absolute; width: 20px; height: 20px; border: 4px solid var(--paper-strong); border-radius: 50%; background: var(--plum); box-shadow: 0 5px 12px rgba(69,48,33,.13); }
.mini-orbit i:nth-child(1) { left: 42%; top: -5%; background: var(--red); }
.mini-orbit i:nth-child(2) { right: 3%; top: 23%; background: var(--brass); }
.mini-orbit i:nth-child(3) { right: 9%; bottom: 16%; }
.mini-orbit i:nth-child(4) { left: 18%; bottom: 5%; background: var(--brass); }
.mini-orbit i:nth-child(5) { left: -4%; top: 36%; background: var(--red); }
.mini-track { position: relative; width: 100%; min-height: 160px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; }
.mini-track::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: linear-gradient(90deg,var(--red),var(--brass),var(--plum)); }
.mini-track span { position: relative; width: 46px; height: 46px; margin: auto; background: var(--paper-strong); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow-small); }
.mini-track span:nth-child(1)::after { content: ""; position: absolute; inset: 13px; border: 2px solid var(--red); border-radius: 50%; }
.mini-track span:nth-child(2)::after { content: ""; position: absolute; left: 16px; top: 10px; width: 10px; height: 20px; border-right: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(45deg); }
.mini-track span:nth-child(3)::after { content: ""; position: absolute; inset: 12px; border: 2px solid var(--plum); transform: rotate(45deg); }
.mini-track span:nth-child(4)::after { content: "↺"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--red); font-size: 1.4rem; }

.flow-section { padding-block: 90px 105px; background: rgba(255,253,249,.67); border-block: 1px solid rgba(62,51,43,.08); }
.operating-loop-map { width: 100%; margin-top: 42px; overflow-x: auto; }
.operating-loop-map svg { min-width: 920px; }
.operating-loop-map .loop-connector { stroke: var(--muted); stroke-width: 1.35; }
.operating-loop-map .loop-return { fill: none; stroke: var(--red); stroke-width: 1.5; }
.operating-loop-map .loop-return-mask { fill: var(--paper-strong); stroke: none; }
.operating-loop-map .loop-return-label { fill: var(--red-dark); font: 650 12px/1 var(--serif); text-anchor: middle; }
.operating-loop-map .loop-card > rect:first-child { fill: var(--paper-strong); stroke: rgba(62,51,43,.22); stroke-width: 1.15; }
.operating-loop-map .loop-scan > rect:first-child { fill: rgba(109,82,111,.045); stroke: rgba(109,82,111,.38); }
.operating-loop-map .loop-package > rect:first-child { fill: rgba(168,40,34,.045); stroke: rgba(168,40,34,.42); }
.operating-loop-map .loop-gate > rect:first-child { fill: rgba(160,122,56,.04); stroke: rgba(160,122,56,.38); }
.operating-loop-map .loop-kicker { fill: var(--muted); font: 650 8px/1 var(--serif); letter-spacing: .08em; }
.operating-loop-map .loop-title { fill: var(--ink); font: 700 17px/1 var(--serif); text-anchor: middle; }
.operating-loop-map .loop-note { fill: var(--muted); font: 500 10px/1 var(--serif); text-anchor: middle; }
.operating-loop-map .goal-flag { fill: rgba(168,40,34,.06); stroke: var(--red); stroke-width: 1.5; }
.operating-loop-map .scope-chip { fill: rgba(160,122,56,.07); stroke: rgba(160,122,56,.24); }
.operating-loop-map .scope-label { fill: var(--brass); font: 650 9px/1 var(--serif); text-anchor: middle; }
.operating-loop-map .portfolio-board,
.operating-loop-map .package-sheet { fill: rgba(255,253,249,.72); stroke: rgba(62,51,43,.16); }
.operating-loop-map .portfolio-item { fill: var(--brass); stroke: var(--paper-strong); stroke-width: 4; }
.operating-loop-map .item-red { fill: var(--red); }
.operating-loop-map .item-plum { fill: var(--plum); }
.operating-loop-map .package-line { fill: rgba(109,82,111,.24); stroke: none; }
.operating-loop-map .package-line-red { fill: rgba(168,40,34,.3); }
.operating-loop-map .agent-rail { fill: rgba(109,82,111,.055); stroke: rgba(109,82,111,.2); }
.operating-loop-map .agent-dot { fill: var(--plum); stroke: none; }
.operating-loop-map .agent-label,
.operating-loop-map .gate-label { fill: var(--muted); font: 550 10px/1 var(--serif); }
.operating-loop-map .gate-box { fill: rgba(109,82,111,.06); stroke: rgba(109,82,111,.34); }
.operating-loop-map .gate-check { fill: none; stroke: var(--plum); stroke-width: 1.6; }
.operating-loop-map .writeback-chip { fill: rgba(160,122,56,.07); stroke: rgba(160,122,56,.26); }
.operating-loop-map .writeback-label { fill: var(--red-dark); font: 650 9px/1 var(--serif); text-anchor: middle; }

.roles-section { padding-block: 110px 120px; }
.role-line { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.role-line::before { content: ""; position: absolute; left: 10%; right: 10%; top: 82px; height: 1px; background: linear-gradient(90deg,var(--red),var(--brass),var(--plum)); }
.role-card { position: relative; z-index: 1; min-height: 260px; padding: 30px 24px; text-align: center; background: rgba(255,253,249,.86); border: 1px solid var(--line); border-radius: 70px 70px 14px 14px; box-shadow: 0 12px 32px rgba(69,48,33,.06); }
.role-control { transform: translateY(-18px); box-shadow: var(--shadow); }
.role-agent { transform: translateY(10px); }
.role-library { border-radius: 100px 100px 14px 14px; }
.role-icon { width: 92px; height: 92px; display: grid; place-items: center; margin: 0 auto 22px; padding: 20px; color: var(--red); background: var(--paper-strong); border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow-small); }
.role-control .role-icon { color: var(--brass); }
.role-agent .role-icon,
.role-library .role-icon { color: var(--plum); }
.role-card h3 { margin: 0 0 10px; font: 700 1.12rem/1.4 var(--serif); }
.role-card p { margin: 0; color: var(--muted); font-size: .79rem; }

.transformation-section { padding-bottom: 120px; }
.transformation-visual { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; padding: 22px; background: rgba(255,253,249,.74); border: 1px solid var(--line); border-radius: var(--radius); }
.transform-panel { position: relative; min-height: 280px; overflow: hidden; background: #f1ece4; border: 1px solid rgba(105,83,66,.12); border-radius: 13px; }
.transform-arrow { color: var(--brass); font-size: 1.7rem; }
.task-chaos i { position: absolute; display: block; width: 90px; height: 62px; background: #fffaf2; border: 1px solid rgba(105,83,66,.15); box-shadow: var(--shadow-small); }
.task-chaos i::before { content: ""; position: absolute; inset: 15px; background: repeating-linear-gradient(0deg,transparent 0 9px,rgba(81,66,54,.14) 9px 10px); }
.task-chaos i:nth-child(1) { left: 5%; top: 7%; transform: rotate(-12deg); }
.task-chaos i:nth-child(2) { left: 36%; top: 18%; transform: rotate(7deg); }
.task-chaos i:nth-child(3) { right: 2%; top: 5%; transform: rotate(-4deg); }
.task-chaos i:nth-child(4) { left: 8%; bottom: 10%; transform: rotate(8deg); }
.task-chaos i:nth-child(5) { left: 44%; bottom: 3%; transform: rotate(-8deg); }
.task-chaos i:nth-child(6) { right: 4%; bottom: 20%; transform: rotate(13deg); }
.route-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 28px 22px; }
.route-board span { position: relative; background: rgba(255,253,249,.92); border: 1px solid var(--line); border-radius: 8px; }
.route-board span::after { content: ""; position: absolute; left: 16px; top: 20px; width: 15px; height: 15px; background: var(--red); border-radius: 50%; box-shadow: 0 54px 0 var(--brass), 0 108px 0 var(--plum); }
.route-board i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.route-board i:nth-of-type(1) { left: 31%; top: 25%; }
.route-board i:nth-of-type(2) { left: 63%; top: 51%; background: var(--plum); }
.route-board i:nth-of-type(3) { left: 38%; bottom: 18%; background: var(--brass); }
.continuity-board { padding: 30px 26px; }
.continuity-board span { position: relative; display: block; height: 48px; margin-bottom: 16px; border-bottom: 1px solid rgba(109,82,111,.28); }
.continuity-board span::before,
.continuity-board span::after { content: ""; position: absolute; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); }
.continuity-board span::before { left: 10%; }
.continuity-board span::after { right: 18%; background: var(--brass); }
.continuity-board i { position: absolute; right: 10%; width: 46px; height: 10px; border-radius: 999px; background: rgba(109,82,111,.2); }
.continuity-board i:nth-of-type(1) { top: 44px; }
.continuity-board i:nth-of-type(2) { top: 108px; }
.continuity-board i:nth-of-type(3) { top: 172px; }
.continuity-board b { position: absolute; right: 24px; bottom: 18px; width: 60px; height: 42px; border: 2px solid var(--brass); border-top-width: 8px; border-radius: 5px; opacity: .65; }

.principles-section { padding-block: 30px 110px; }
.principles-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.principles-grid article { padding: 35px 50px; text-align: center; border-right: 1px solid var(--line); }
.principles-grid article:last-child { border-right: 0; }
.principles-grid span { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; color: var(--red); border: 1px solid currentColor; border-radius: 50%; font: 700 1.8rem/1 var(--serif); }
.principles-grid article:nth-child(2) span { color: var(--plum); }
.principles-grid article:nth-child(3) span { color: var(--brass); }
.principles-grid h3 { margin: 0 0 10px; font: 700 1.18rem/1.4 var(--serif); }
.principles-grid p { margin: 0; color: var(--muted); font-size: .82rem; }

.detail-cta { min-height: 260px; display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 80px; padding: 50px 60px; background: linear-gradient(135deg,rgba(239,235,239,.92),rgba(255,253,249,.88)); border: 1px solid rgba(109,82,111,.1); border-radius: var(--radius); }
.detail-cta h2 { margin: 0; font: 700 clamp(2rem,3.3vw,3rem)/1.25 var(--serif); }

@media (max-width: 1020px) {
  .detail-hero { grid-template-columns: 1fr; }
  .portfolio-sculpture { width: min(100%,700px); margin: auto; }
  .scale-grid { grid-template-columns: 1fr; }
  .role-line { grid-template-columns: repeat(2,1fr); gap: 28px; }
  .role-line::before { display: none; }
  .role-control,
  .role-agent { transform: none; }
}

@media (max-width: 760px) {
  .detail-hero { padding-block: 55px 75px; }
  .detail-hero h1 { font-size: clamp(3.2rem,14vw,5rem); }
  .portfolio-sculpture { min-height: 500px; transform: scale(.85); transform-origin: top center; margin-bottom: -80px; }
  .scale-card { grid-template-columns: 1fr; text-align: center; }
  .operating-loop-map svg { min-width: 860px; }
  .role-line { grid-template-columns: 1fr; }
  .role-card { min-height: auto; border-radius: 60px 60px 14px 14px; }
  .transformation-visual { grid-template-columns: 1fr; }
  .transform-arrow { transform: rotate(90deg); text-align: center; }
  .principles-grid { grid-template-columns: 1fr; }
  .principles-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .principles-grid article:last-child { border-bottom: 0; }
  .detail-cta { align-items: flex-start; flex-direction: column; padding: 40px 28px; }
}

@media (max-width: 520px) {
  .portfolio-sculpture { min-height: auto; display: grid; grid-template-columns: 1fr; gap: 16px; transform: none; margin: 20px 0 0; }
  .sculpture-orbit,
  .project-token { display: none; }
  .sculpture-core { position: static; width: 145px; height: 145px; margin: auto; }
  .execution-rail { position: relative; left: auto; right: auto; top: auto; min-height: 88px; padding-left: 14px; }
  .execution-rail::after { display: none; }
  .execution-rail span { width: 42px; height: 42px; }
  .scale-card { padding: 30px 22px; }
  .mini-track { grid-template-columns: repeat(4,1fr); }
}

/* 第三轮：图像化方法展示与自适应排版 */
body { overflow-x: hidden; }
svg text { stroke: none; stroke-width: 0; paint-order: normal; }
.kicker { display: none; }

.hero h1 > span,
.title-lock > span {
  display: block;
  white-space: nowrap;
}

.section-heading h2 { text-wrap: balance; }

.concept-figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: rgba(255,253,249,.82);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 42px rgba(69,48,33,.07);
}

.concept-figure > img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.process-legend {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}

.process-legend-four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.process-legend-five { grid-template-columns: repeat(5,minmax(0,1fr)); }
.process-legend-three { grid-template-columns: repeat(3,minmax(0,1fr)); }

.process-legend span {
  min-height: 56px;
  display: grid;
  place-items: center;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(255,253,249,.96);
  font: 600 .8rem/1.25 var(--serif);
  text-align: center;
  white-space: nowrap;
}

.portfolio-section {
  grid-template-columns: minmax(280px,.62fr) minmax(0,1.38fr);
  gap: 52px;
}

.portfolio-copy h2 {
  font-size: clamp(2.35rem,4vw,3.75rem);
  line-height: 1.14;
}

.portfolio-copy > p {
  margin: 22px 0 0;
  text-wrap: pretty;
}

.portfolio-concept > img { aspect-ratio: 864 / 527; }

.library-concept { margin-top: 26px; }
.library-concept > img { aspect-ratio: 864 / 542; }

.about-section {
  grid-template-columns: .38fr 1.62fr;
  min-height: 410px;
}

.about-mark { width: min(100%,220px); }
.about-lede {
  max-width: 730px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.9;
  text-wrap: pretty;
}

.value-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.value-tags span {
  min-width: 112px;
  padding: 9px 17px;
  color: var(--red-dark);
  background: rgba(255,253,249,.8);
  border: 1px solid rgba(168,40,34,.18);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.detail-hero h1 { white-space: nowrap; }
.flow-section .section-heading { margin-bottom: 38px; }
.detail-concept { width: 100%; }

.roles-section .section-heading {
  max-width: 900px;
  margin-bottom: 42px;
}

.responsibility-legend {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}

.responsibility-legend article {
  min-width: 0;
  padding: 20px 18px 22px;
  background: rgba(255,253,249,.97);
  text-align: center;
}

.responsibility-legend h3 {
  margin: 0;
  font: 700 .92rem/1.35 var(--serif);
  white-space: nowrap;
}

.responsibility-legend p {
  margin: 8px auto 0;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.transformation-section .section-heading {
  max-width: 900px;
  margin-bottom: 34px;
}

.detail-cta h2 { text-wrap: balance; }

@media (max-width: 1020px) {
  .portfolio-section { grid-template-columns: 1fr; gap: 34px; }
  .portfolio-copy { text-align: left; }
  .portfolio-copy > p { margin-inline: 0; }
  .portfolio-copy h2 { width: fit-content; }
  .about-section { grid-template-columns: .42fr 1.58fr; }
  .responsibility-legend { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(2.8rem,13vw,4.7rem); }
  .hero-nowrap { white-space: nowrap; }
  .portfolio-section { padding-block: 78px; }
  .concept-figure { border-radius: 14px; }
  .process-legend-four,
  .process-legend-five,
  .process-legend-three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .process-legend-five span:last-child,
  .process-legend-three span:last-child { grid-column: 1 / -1; }
  .evidence-panel { padding: 28px; }
  .about-section { grid-template-columns: 1fr; }
  .about-mark { width: 170px; }
  .about-copy { text-align: center; }
  .about-copy .title-lock { width: fit-content; margin-inline: auto; }
  .about-lede { margin-inline: auto; }
  .value-tags { justify-content: center; }
  .detail-hero h1 { font-size: clamp(2.7rem,12vw,4.5rem); }
  .responsibility-legend { grid-template-columns: 1fr; }
  .responsibility-legend article { padding: 18px 16px; }
  .responsibility-legend p { max-width: 420px; }
  .roles-section,
  .flow-section { padding-block: 80px; }
  .transformation-section { padding-bottom: 90px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(2.35rem,11.5vw,3.2rem); }
  .hero-nowrap { white-space: nowrap; }
  .portfolio-copy h2 { font-size: clamp(2.1rem,10.5vw,2.75rem); }
  .evidence-panel h2 { font-size: clamp(1.4rem,7.4vw,1.8rem); }
  .about-section h2,
  .roles-section h2,
  .flow-section h2,
  .transformation-section h2 { font-size: clamp(1.65rem,8.2vw,2.05rem); }
  .process-legend-four,
  .process-legend-five,
  .process-legend-three { grid-template-columns: 1fr; }
  .process-legend-five span:last-child,
  .process-legend-three span:last-child { grid-column: auto; }
  .process-legend span { min-height: 48px; }
  .about-section { padding: 40px 20px; }
  .value-tags { display: grid; grid-template-columns: repeat(3,1fr); width: 100%; gap: 6px; }
  .value-tags span { min-width: 0; padding-inline: 8px; }
  .detail-hero h1 { font-size: clamp(2.25rem,11vw,2.8rem); }
}

/* 第四轮：独立方法页与清晰的流程图 */
.preview-card {
  display: block;
  color: inherit;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.preview-card:hover,
.preview-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(168,40,34,.28);
  box-shadow: 0 18px 40px rgba(69,48,33,.1);
}

.preview-caption {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 20px 22px 22px;
}

.preview-caption span { color: var(--red-dark); font-size: .76rem; white-space: nowrap; }
.preview-caption strong { font: 700 1.15rem/1.4 var(--serif); text-align: right; }
.preview-caption b { color: var(--brass); font-size: .68rem; font-weight: 600; white-space: nowrap; }

.evidence-link { width: fit-content; margin-top: 24px; white-space: nowrap; }
#visual-lab .evidence-link { grid-column: 1; grid-row: 3; align-self: end; }

.scale-bridge {
  display: grid;
  grid-template-columns: minmax(0,1fr) 150px minmax(0,1fr);
  align-items: stretch;
  gap: 20px;
}

.scale-lane {
  min-width: 0;
  min-height: 320px;
  padding: 36px;
  background: rgba(255,253,249,.82);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.scale-lane-project { background: rgba(239,235,239,.52); border-color: rgba(109,82,111,.22); }
.scale-label { color: var(--red-dark); font-size: .72rem; font-weight: 650; }
.scale-lane-project .scale-label { color: var(--plum); }
.scale-lane h3 { margin: 8px 0 12px; font: 700 1.7rem/1.3 var(--serif); white-space: nowrap; }
.scale-lane p { max-width: 440px; margin: 0; color: var(--muted); font-size: .84rem; }

.scale-items,
.scale-steps {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
}

.scale-items span,
.scale-steps li {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(255,253,249,.88);
  border: 1px solid rgba(62,51,43,.13);
  border-radius: 8px;
  font-size: .75rem;
  white-space: nowrap;
}

.scale-steps { counter-reset: scale-step; list-style: none; }
.scale-steps li { counter-increment: scale-step; }
.scale-steps li::before { content: "0" counter(scale-step); margin-right: 10px; color: var(--red-dark); font-weight: 700; }

.scale-handoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--red-dark);
  text-align: center;
}

.scale-handoff span { max-width: 120px; font-size: .74rem; font-weight: 650; }
.scale-handoff i { position: relative; width: 100%; height: 1px; background: rgba(168,40,34,.52); }
.scale-handoff i::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-right: 1px solid var(--red); border-top: 1px solid var(--red); transform: rotate(45deg); }

.detail-cta .primary-button { flex: 0 0 auto; white-space: nowrap; }
.detail-cta > div { min-width: 0; max-width: 760px; }

.method-detail-hero {
  grid-template-columns: minmax(430px,.82fr) minmax(0,1.18fr);
  gap: 52px;
}

.method-detail-hero h1 { font-size: clamp(3rem,5vw,4.55rem); white-space: nowrap; }
.method-detail-hero .detail-intro { max-width: 570px; }

.method-hero-figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: rgba(255,253,249,.82);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.method-hero-figure > img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
.library-detail-page .method-hero-figure > img { aspect-ratio: auto; }
.method-hero-figure figcaption { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.method-hero-figure figcaption span { min-height: 50px; display: grid; place-items: center; padding: 8px; font-size: .72rem; font-weight: 600; text-align: center; white-space: nowrap; }
.method-hero-figure figcaption span + span { border-left: 1px solid var(--line); }

.workflow-section { padding-block: 96px 110px; background: rgba(255,253,249,.66); border-block: 1px solid rgba(62,51,43,.08); }
.workflow-section .section-heading { max-width: 860px; }
.workflow-board { display: grid; gap: 24px; }
.workflow-phase { min-width: 0; padding: 26px; background: rgba(255,253,249,.8); border: 1px solid var(--line); border-radius: 12px; }
.workflow-phase > header { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.workflow-phase > header span { color: var(--red-dark); font-size: .72rem; font-weight: 650; white-space: nowrap; }
.workflow-phase > header h3 { margin: 0; font: 700 1.22rem/1.35 var(--serif); text-align: right; }

.workflow-row { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.workflow-row-four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.workflow-row-three { grid-template-columns: repeat(3,minmax(0,1fr)); }

.workflow-node {
  position: relative;
  min-width: 0;
  min-height: 218px;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 18px;
  background: var(--paper-strong);
  border: 1px solid rgba(62,51,43,.16);
  border-radius: 9px;
}

.workflow-node:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -27px;
  top: 50%;
  width: 26px;
  height: 10px;
  background: var(--brass);
  clip-path: polygon(0 45%,72% 45%,72% 0,100% 50%,72% 100%,72% 55%,0 55%);
  opacity: .72;
}

.workflow-node-focus { background: rgba(168,40,34,.045); border-color: rgba(168,40,34,.34); }
.workflow-node > span { color: var(--red-dark); font-size: .66rem; font-weight: 650; }
.workflow-node h4 { margin: 10px 0 12px; font: 700 1.05rem/1.35 var(--serif); white-space: nowrap; }
.workflow-node p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.75; text-wrap: pretty; }
.workflow-node small { display: block; margin-top: auto; padding-top: 18px; color: var(--brass); font-size: .66rem; white-space: nowrap; }

.workflow-handoff { display: flex; align-items: center; justify-content: center; min-height: 46px; }
.workflow-handoff span { position: relative; min-width: 250px; padding: 8px 20px; color: var(--plum); background: var(--paper); border: 1px solid rgba(109,82,111,.22); border-radius: 999px; font-size: .7rem; font-weight: 650; text-align: center; white-space: nowrap; }
.workflow-handoff span::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 1px; height: 13px; background: var(--plum); }

.decision-section,
.outputs-section,
.card-system-section,
.layers-section,
.shelves-section,
.visual-principles,
.before-after-section,
.boundary-section { padding-block: 92px; }

.decision-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.decision-card { min-height: 300px; padding: 38px 42px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,253,249,.78); }
.decision-ai { background: rgba(239,235,239,.58); border-color: rgba(109,82,111,.2); }
.decision-card > span { color: var(--red-dark); font-size: .72rem; font-weight: 650; }
.decision-ai > span { color: var(--plum); }
.decision-card h3 { margin: 10px 0 20px; font: 700 1.55rem/1.35 var(--serif); white-space: nowrap; }
.decision-card ul { margin: 0; padding-left: 1.2em; color: var(--muted); font-size: .84rem; line-height: 2.15; }

.boundary-section { border-top: 1px solid rgba(62,51,43,.08); }
.boundary-grid { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; gap: 22px; }
.boundary-grid article { min-height: 250px; padding: 38px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,253,249,.78); }
.boundary-grid article > span { color: var(--red-dark); font-size: .72rem; font-weight: 650; }
.boundary-grid article:last-child > span { color: var(--plum); }
.boundary-grid h3 { margin: 12px 0; font: 700 1.55rem/1.35 var(--serif); }
.boundary-grid p { margin: 0; color: var(--muted); font-size: .84rem; }
.boundary-grid > i { color: var(--brass); font: 500 2rem/1 var(--serif); text-align: center; }

.outputs-section { padding-top: 40px; }
.output-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid var(--line); }
.output-grid article { min-width: 0; padding: 30px 26px; text-align: center; border-right: 1px solid var(--line); }
.output-grid article:last-child { border-right: 0; }
.output-grid strong { display: block; color: var(--red-dark); font: 700 1.05rem/1.4 var(--serif); white-space: nowrap; }
.output-grid p { margin: 8px 0 0; color: var(--muted); font-size: .75rem; text-wrap: balance; }

.method-note { margin-bottom: 92px; }
.method-note > div { padding: 42px 50px; background: rgba(239,235,239,.58); border: 1px solid rgba(109,82,111,.16); border-radius: 12px; }
.method-note span { color: var(--plum); font-size: .72rem; font-weight: 650; }
.method-note h2 { max-width: 920px; margin: 10px 0 0; font: 700 clamp(1.7rem,3.2vw,2.8rem)/1.35 var(--serif); text-wrap: balance; }

.card-system-section { padding-bottom: 36px; }
.card-system-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.card-system-grid article { min-height: 260px; padding: 34px; background: rgba(255,253,249,.78); border: 1px solid var(--line); border-radius: 10px; }
.card-system-grid article:nth-child(2) { border-color: rgba(168,40,34,.26); background: rgba(168,40,34,.035); }
.card-system-grid article:nth-child(3) { border-color: rgba(109,82,111,.22); background: rgba(109,82,111,.035); }
.card-system-grid span { color: var(--brass); font-size: .7rem; font-weight: 650; }
.card-system-grid article:nth-child(2) span { color: var(--red-dark); }
.card-system-grid article:nth-child(3) span { color: var(--plum); }
.card-system-grid h3 { margin: 14px 0 12px; font: 700 1.35rem/1.35 var(--serif); white-space: nowrap; }
.card-system-grid p { margin: 0; color: var(--muted); font-size: .8rem; }

.layers-section { padding-top: 56px; }
.knowledge-layers { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.knowledge-layers li { min-width: 0; min-height: 190px; display: flex; flex-direction: column; justify-content: center; padding: 26px; background: rgba(255,253,249,.75); border-right: 1px solid var(--line); }
.knowledge-layers li:last-child { border-right: 0; }
.knowledge-layers span { color: var(--red-dark); font-size: .72rem; font-weight: 700; }
.knowledge-layers strong { margin-top: 10px; font: 700 1.1rem/1.35 var(--serif); white-space: nowrap; }
.knowledge-layers small { margin-top: 8px; color: var(--muted); font-size: .72rem; }

.visual-system-map { display: grid; grid-template-columns: minmax(0,1fr) 90px minmax(0,1fr) 90px minmax(0,1fr); align-items: center; }
.visual-system-map article { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; background: rgba(255,253,249,.8); border: 1px solid var(--line); border-radius: 10px; }
.visual-system-map article span { color: var(--red-dark); font-size: .7rem; font-weight: 650; }
.visual-system-map article strong { margin-top: 12px; font: 700 1rem/1.5 var(--serif); white-space: nowrap; }
.visual-system-map .visual-system-focus { background: rgba(168,40,34,.04); border-color: rgba(168,40,34,.3); }
.visual-system-map > i { position: relative; height: 1px; background: rgba(160,122,56,.6); }
.visual-system-map > i::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid var(--brass); border-right: 1px solid var(--brass); transform: rotate(45deg); }

@media (max-width: 1020px) {
  .scale-bridge { grid-template-columns: 1fr; }
  .scale-handoff { min-height: 88px; }
  .scale-handoff i { width: 1px; height: 46px; }
  .scale-handoff i::after { right: -4px; top: auto; bottom: 0; transform: rotate(135deg); }
  .method-detail-hero { grid-template-columns: 1fr; }
  .method-detail-hero .detail-hero-copy { max-width: 760px; }
  .workflow-row-four,
  .workflow-row-three { grid-template-columns: 1fr; }
  .workflow-node { min-height: 170px; }
  .workflow-node:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -27px; transform: rotate(90deg); transform-origin: center; }
  .decision-grid { grid-template-columns: 1fr; }
  .output-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .output-grid article:nth-child(2) { border-right: 0; }
  .output-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .card-system-grid { grid-template-columns: 1fr; }
  .card-system-grid article { min-height: 210px; }
  .knowledge-layers { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .knowledge-layers li:nth-child(2) { border-right: 0; }
  .knowledge-layers li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .visual-system-map { grid-template-columns: 1fr; gap: 0; }
  .visual-system-map > i { width: 1px; height: 58px; margin: auto; }
  .visual-system-map > i::after { right: -4px; top: auto; bottom: 0; transform: rotate(135deg); }
}

@media (max-width: 760px) {
  .preview-caption { grid-template-columns: 1fr auto; align-items: center; }
  .preview-caption strong { grid-column: 1 / -1; grid-row: 1; text-align: left; }
  .preview-caption span { grid-column: 1; grid-row: 2; }
  .preview-caption b { grid-column: 2; grid-row: 2; }
  #visual-lab .evidence-link { grid-column: 1; grid-row: auto; }
  .scale-lane { min-height: auto; padding: 28px 24px; }
  .method-detail-hero h1 { font-size: clamp(2.45rem,11.6vw,3.5rem); }
  .workflow-section { padding-block: 76px 88px; }
  .workflow-phase { padding: 20px; }
  .workflow-phase > header { align-items: flex-start; flex-direction: column; gap: 4px; }
  .workflow-phase > header h3 { text-align: left; }
  .workflow-node { min-height: 158px; padding: 20px; }
  .decision-section,
  .outputs-section,
  .card-system-section,
  .layers-section,
  .shelves-section,
  .visual-principles,
  .before-after-section,
  .boundary-section { padding-block: 74px; }
  .decision-card { min-height: auto; padding: 30px 26px; }
  .boundary-grid { grid-template-columns: 1fr; }
  .boundary-grid article { min-height: auto; padding: 30px 26px; }
  .boundary-grid > i { transform: rotate(90deg); }
  .method-note > div { padding: 34px 28px; }
  .detail-cta h2 { font-size: clamp(1.75rem,8.3vw,2.3rem); }
}

@media (max-width: 480px) {
  .section-shell,
  .site-header { width: min(100% - 32px,1260px); }
  .method-detail-hero h1 { font-size: clamp(2.2rem,10.6vw,2.75rem); }
  .detail-subtitle { font-size: 1.02rem; }
  .method-hero-figure figcaption span { min-height: 44px; padding-inline: 4px; font-size: .64rem; }
  .scale-items,
  .scale-steps { grid-template-columns: 1fr; }
  .workflow-phase { padding: 16px; }
  .workflow-node h4,
  .decision-card h3,
  .output-grid strong,
  .card-system-grid h3,
  .knowledge-layers strong,
  .visual-system-map article strong { white-space: normal; }
  .workflow-node small { white-space: normal; }
  .workflow-handoff span { min-width: 0; width: 100%; white-space: normal; }
  .output-grid { grid-template-columns: 1fr; }
  .output-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .output-grid article:last-child { border-bottom: 0; }
  .knowledge-layers { grid-template-columns: 1fr; }
  .knowledge-layers li { min-height: 145px; border-right: 0; border-bottom: 1px solid var(--line); }
  .knowledge-layers li:last-child { border-bottom: 0; }
  .visual-system-map article { min-height: 150px; padding: 24px 16px; }
  .detail-cta .primary-button { max-width: 100%; padding-left: 19px; gap: 9px; font-size: .78rem; }
}