.story-intro {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s16);padding-block:var(--s12) var(--s16);align-items:center}
.story-breadcrumb {display:flex;gap:var(--s3);font-size:var(--text-xs);color:var(--muted);margin-bottom:var(--s10)}
.story-breadcrumb a:hover {color:var(--accent)}
.story-intro h1 {font-size:var(--text-display);margin-block:var(--s4) var(--s6);line-height:1.3}
.story-intro h1 em {font-style:normal;color:var(--accent)}
.story-definition {max-width:34em;font-size:var(--text-lg);font-weight:600;line-height:1.8}
.story-intro-note {font-size:var(--text-sm);color:var(--muted);margin-top:var(--s4);line-height:1.9}
.story-actions {display:flex;flex-wrap:wrap;align-items:center;gap:var(--s6);margin-top:var(--s8)}
.story-brand-panel {background:var(--accent-soft);border-radius:var(--r3);overflow:hidden;padding:var(--s8)}
.story-brand-top {display:flex;justify-content:space-between;align-items:center;gap:var(--s4)}
.story-brand-top img,.story-original-logo img {width:89px;height:32px}
.story-brand-top img,.story-original-logo img {box-sizing:content-box;padding:var(--s2);background:var(--white);border-radius:var(--r1)}
.story-brand-top>span {font-size:var(--text-xs);color:var(--accent-hover);text-align:right;line-height:1.7}
.story-brand-quote {color:var(--accent);font-size:var(--text-h2);font-weight:800;line-height:1.45;letter-spacing:-.04em;padding-block:var(--s10)}
.story-brand-quote>span {color:var(--symbol-orange)}
.story-color-ribbon {display:flex;height:var(--s10);overflow:hidden;border-radius:var(--r1)}
.story-color-ribbon span {flex:1}
.story-color-ribbon span:nth-child(1) {background:var(--symbol-purple)}
.story-color-ribbon span:nth-child(2) {background:var(--symbol-royal-blue)}
.story-color-ribbon span:nth-child(3) {background:var(--symbol-sky-blue)}
.story-color-ribbon span:nth-child(4) {background:var(--symbol-cyan)}
.story-color-ribbon span:nth-child(5) {background:var(--symbol-yellow)}
.story-color-ribbon span:nth-child(6) {background:var(--symbol-orange)}
.story-panel-caption {font-size:var(--text-xs);color:var(--accent-hover);margin-top:var(--s4)}
.story-jump {display:flex;flex-wrap:wrap;gap:var(--s2) var(--s8);border-block:1px solid var(--line);padding-block:var(--s3)}
.story-jump a {display:inline-flex;align-items:center;min-height:44px;font-size:var(--text-sm);font-weight:600}
.story-jump a:hover {color:var(--accent)}
.story-section {padding-block:var(--s20)}
.story-narrative {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s16);border-bottom:1px solid var(--line)}
.story-prose {min-width:0;font-size:var(--text-base);line-height:1.9;color:var(--ink)}
.story-prose p+p {margin-top:var(--s6)}
.story-prose .story-signature {font-size:var(--text-quote);margin-top:var(--s8)}
.story-section-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s8);margin-bottom:var(--s10)}
.story-section-heading>p,.story-faq-layout>div>p,.story-information>div>p {color:var(--muted);font-size:var(--text-sm);line-height:1.9}
.story-fields {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8)}
.story-fields article {min-width:0;border-top:1px solid var(--line);padding-top:var(--s8)}
.story-field-icon {display:grid;place-items:center;width:48px;height:48px;color:var(--accent);background:var(--accent-soft);border-radius:var(--r2);margin-bottom:var(--s6)}
.story-fields article:last-child .story-field-icon {color:var(--brand-blue-ink);background:var(--brand-blue-soft)}
.story-topic {font-size:var(--text-xs);color:var(--muted);font-weight:600;letter-spacing:.06em}
.story-fields h3 {font-size:24px;margin-block:var(--s2) var(--s4)}
.story-fields p {color:var(--muted);font-size:var(--text-sm);line-height:1.9}
.story-fields article>a {display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:48px;margin-top:var(--s6);font-weight:600;font-size:var(--text-sm);border-bottom:1px solid var(--line)}
.story-fields article>a:hover {color:var(--accent)}
.story-learning-note {display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s6);margin-top:var(--s10);padding:var(--s4) var(--s6);background:var(--surface);border-radius:var(--r2)}
.story-learning-note strong {font-size:var(--text-sm)}
.story-learning-note p {color:var(--muted);font-size:var(--text-xs);flex:1;min-width:220px}
.story-palette-section {background:var(--surface);padding-block:var(--s16)}
.story-palette-layout {display:grid;grid-template-columns:1fr 1.3fr;gap:var(--s16);align-items:center}
.story-palette-layout h2 {margin-bottom:var(--s5)}
.story-palette-layout p {font-size:var(--text-sm);color:var(--muted);line-height:1.9}
.story-original-logo {display:flex;gap:var(--s5);align-items:center;margin-top:var(--s8)}
.story-original-logo span {font-size:var(--text-xs);color:var(--muted)}
.story-swatches {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.story-swatches li {min-width:0}
.swatch-color {display:block;height:96px;border-radius:var(--r2);margin-bottom:var(--s3);background:var(--swatch)}
.symbol-purple {--swatch:var(--symbol-purple)}
.symbol-royal-blue {--swatch:var(--symbol-royal-blue)}
.symbol-sky-blue {--swatch:var(--symbol-sky-blue)}
.symbol-cyan {--swatch:var(--symbol-cyan)}
.symbol-yellow {--swatch:var(--symbol-yellow)}
.symbol-orange {--swatch:var(--symbol-orange)}
.story-swatches strong {display:block;font-size:var(--text-sm)}
.story-swatches code {font-size:var(--text-xs);color:var(--muted);font-family:inherit;font-variant-numeric:tabular-nums}
.story-palette-layout .story-palette-note {font-size:var(--text-xs);margin-top:var(--s6)}
.story-steps {list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8)}
.story-steps li {border-top:1px solid var(--line);padding-top:var(--s6)}
.story-steps li>span {font-size:var(--text-xs);color:var(--accent);font-weight:700}
.story-steps h3 {font-size:var(--text-lg);margin-block:var(--s4) var(--s3)}
.story-steps p {font-size:var(--text-sm);color:var(--muted);line-height:1.9}
.story-preview-note {font-size:var(--text-xs);color:var(--muted);margin-top:var(--s6)}
.story-review-link {display:flex;justify-content:space-between;align-items:center;gap:var(--s6);background:var(--brand-blue-soft);border-radius:var(--r2);padding:var(--s8);margin-top:var(--s12)}
.story-review-link h3 {font-size:24px}
.story-review-link p {font-size:var(--text-sm);color:var(--brand-blue-ink);margin-top:var(--s2)}
.story-faq-layout {display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s16);border-top:1px solid var(--line)}
.story-faq-layout>div>p {margin-top:var(--s4)}
.story-faq details {border-bottom:1px solid var(--line);padding-block:var(--s5)}
.story-faq details:first-child {padding-top:0}
.story-faq summary {display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:44px;font-size:var(--text-base);font-weight:600;cursor:pointer;list-style:none}
.story-faq summary::-webkit-details-marker {display:none}
.story-faq summary:after {content:'+';color:var(--accent);font-size:var(--text-quote);flex-shrink:0}
.story-faq details[open] summary:after {content:'−'}
.story-faq details p {color:var(--muted);font-size:var(--text-sm);line-height:1.9;margin-top:var(--s3);max-width:42em}
.story-information {display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s16);border-top:1px solid var(--line)}
.story-information>div>p {margin-top:var(--s4)}
.story-information dl {margin:0}
.story-information dl>div {display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--s5);padding-block:var(--s4);border-bottom:1px solid var(--line);font-size:var(--text-sm)}
.story-information dl>div:first-child {padding-top:0}
.story-information dt {color:var(--muted)}
.story-information dd {margin:0;overflow-wrap:anywhere}
.story-information dd span {display:block;color:var(--muted);font-size:var(--text-xs);margin-top:var(--s1)}
.story-information a:hover {color:var(--accent)}
.story-information .story-source-note {font-size:var(--text-xs);color:var(--muted);line-height:1.9;margin-top:var(--s5)}
.story-source-note a {text-decoration:underline;text-underline-offset:3px}
.story-closing {background:var(--accent-soft);padding-block:var(--s12)}
.story-closing>.container {display:flex;align-items:center;justify-content:space-between;gap:var(--s8)}
.story-closing h2 {font-size:28px}
.home-story-link {display:flex;gap:var(--s8);justify-content:space-between;align-items:center;padding-block:var(--s10);border-bottom:1px solid var(--line)}
.home-story-link h2 {font-size:24px}
.home-story-link p {font-size:var(--text-sm);color:var(--muted);margin-top:var(--s2)}
@media(max-width:1000px) {.story-intro,.story-palette-layout,.story-faq-layout,.story-information {gap:var(--s8)}.story-intro h1 {font-size:40px}.story-brand-quote {font-size:28px}.story-fields {gap:var(--s6)}}
@media(max-width:899px) {.story-fields {grid-template-columns:1fr}.story-fields article {padding-block:var(--s6) 0}.story-fields article>a {max-width:400px;margin-top:var(--s3)}.story-field-icon {margin-bottom:var(--s4)}.story-section-heading {align-items:flex-start}.story-steps {grid-template-columns:1fr}.story-steps br {display:none}}
@media(max-width:899px) {.story-narrative {grid-template-columns:1fr;gap:var(--s8)}}
@media(max-width:767px) {
 .story-intro {grid-template-columns:1fr;padding-block:var(--s8) var(--s10);gap:var(--s8)}
 .story-breadcrumb {margin-bottom:var(--s8)}.story-intro h1 {font-size:30px}.story-definition {font-size:var(--text-base)}.story-intro-note br {display:none}
 .story-brand-panel {padding:var(--s6)}.story-brand-quote {padding-block:var(--s8);font-size:28px}
 .story-section {padding-block:var(--s12)}.story-section h2,.story-palette-layout h2 {font-size:28px}.story-section-heading {flex-direction:column;gap:var(--s4);margin-bottom:var(--s6)}
 .story-jump {gap:0 var(--s5);padding-block:var(--s2)}.story-jump a {font-size:var(--text-xs)}
 .story-learning-note {padding:var(--s5);gap:var(--s2);align-items:flex-start;flex-direction:column}.story-learning-note p {min-width:0}
 .story-palette-section {padding-block:var(--s12)}.story-palette-layout,.story-faq-layout,.story-information {grid-template-columns:1fr;gap:var(--s8)}
 .story-swatches {gap:var(--s5) var(--s3)}.swatch-color {height:80px}
 .story-review-link {flex-direction:column;align-items:flex-start;padding:var(--s6);gap:var(--s5)}.story-review-link h3 {font-size:var(--text-quote)}
 .story-information dl>div {grid-template-columns:1fr;gap:var(--s2)}
 .story-closing>.container,.home-story-link {flex-direction:column;align-items:flex-start;gap:var(--s5)}.story-closing h2 {font-size:24px}
}