/* Portrait 3:4 artwork accordion, with the same black canvas as the portfolio. */
.color-stories{background:var(--bg,#080808);color:var(--fg,#eeede9);padding:64px 4.2% 60px;margin:0 0 80px;scroll-margin-top:80px}
.color-stories-inner{max-width:1440px;margin:auto;container-type:inline-size;--story-width:min(40.5cqw,495px)}
.color-stories-heading{text-align:center;margin-bottom:42px}
.color-stories-heading h2{font-family:var(--cn-sans,sans-serif);font-size:clamp(34px,4.4vw,68px);font-weight:500;letter-spacing:-.05em;line-height:1.3;text-wrap:balance}
.color-stories-heading h2>span{display:inline-block;color:var(--cn-red,#ff6559);font-family:var(--cn-song,serif);font-weight:700;transform:skewX(-5deg);margin-left:.08em}
.color-stories-heading p{font-size:14px;color:#969693;margin-top:18px;letter-spacing:.06em}
.color-stories-deck{display:flex;gap:8px;height:calc(var(--story-width) * 4 / 3)}
.color-story{position:relative;isolation:isolate;flex:1 1 0;min-width:0;border:0;border-radius:14px;background:var(--story-color);color:var(--story-ink);padding:0;text-align:left;overflow:hidden;transition:flex-basis .7s cubic-bezier(.22,.8,.22,1),background .25s;touch-action:pan-y}
.color-story.is-active{flex:0 0 var(--story-width);background:transparent;color:var(--story-accent,var(--story-color))}
.color-story:focus-visible{outline:2px solid #eeede9;outline-offset:4px;z-index:2}
.color-story:hover:not(.is-active){box-shadow:inset 0 0 0 2px #ffffff88}
.color-story-index{position:absolute;top:20px;left:18px;font-size:11px;letter-spacing:.08em;opacity:.65;z-index:2}
.color-story.is-active .color-story-index{display:none}
.color-story-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:600;letter-spacing:.025em;white-space:nowrap;z-index:2}
.color-story.is-active .color-story-name{left:22px;top:auto;bottom:18px;transform:none;font-size:clamp(24px,2.5vw,36px);letter-spacing:-.045em;font-weight:500}
.color-story-hex{display:none;position:absolute;right:22px;bottom:25px;z-index:2;font-size:11px;letter-spacing:.06em;opacity:.7}
.color-story.is-active .color-story-hex{display:block}
.color-story-content{position:absolute;inset:0;background:transparent;border-radius:14px;overflow:hidden;pointer-events:none}
.color-story-content[hidden],.color-story-placeholder[hidden]{display:none}
.color-story-placeholder{position:absolute;inset:0;display:grid;place-items:center;color:#777}
.color-story-outline,.color-story-plus{display:none}
.color-story-empty{font-size:12px;letter-spacing:.1em}
.color-story-empty>span{display:block;text-align:center;margin-top:8px;opacity:.6}
.color-story-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;padding:0;animation:color-story-reveal .5s both}
.color-stories-footer{display:flex;gap:24px;align-items:center;margin-top:22px;font-size:11px;color:#969693;letter-spacing:.06em}
.color-stories-counter{min-width:140px;color:#c3c3bc;font-variant-numeric:tabular-nums}
.color-stories-footer>span:nth-child(2){margin:auto}
.color-stories-arrows{display:flex;gap:8px}
.color-stories-arrows button{width:36px;height:36px;border:1px solid #44443e;background:transparent;border-radius:50%;color:#eeede9;font-size:18px;transition:background .2s}
.color-stories-arrows button:hover{background:#292926}
@keyframes color-story-reveal{from{opacity:0}to{opacity:1}}
@media(max-width:1200px) and (min-width:701px){.color-story-name{writing-mode:vertical-rl;font-size:12px}.color-story.is-active .color-story-name{writing-mode:horizontal-tb}.color-story-index{left:12px}}
@media(max-width:700px){.color-stories{padding:44px 20px 35px;margin-bottom:55px}.color-stories-heading{margin-bottom:28px}.color-stories-heading h2{font-size:clamp(30px,6.7vw,43px)}.color-stories-heading p{font-size:12px;letter-spacing:.02em}.color-stories-deck{flex-direction:column;height:auto;gap:7px}.color-story{flex:none;height:46px;min-height:46px;border-radius:10px;transition:height .6s cubic-bezier(.22,.8,.22,1),background .25s}.color-story.is-active{flex:none;height:calc(100cqw * 4 / 3)}.color-story-index{top:50%;left:16px;transform:translateY(-50%)}.color-story-name{font-size:12px}.color-story.is-active .color-story-name{font-size:28px;left:16px;bottom:14px}.color-story-content{border-radius:10px}.color-story-hex{font-size:10px;right:16px;bottom:21px}.color-stories-footer{gap:12px;flex-wrap:wrap;margin-top:18px}.color-stories-footer>span:nth-child(2){order:3;flex-basis:100%;margin:0;text-align:center;font-size:10px}.color-stories-arrows{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.color-stories *{animation:none!important;transition:none!important}}

/* Expanded artwork stays free of color-name and hex overlays. */
.color-story.is-active .color-story-name,.color-story.is-active .color-story-hex{display:none}

/* A subtle image zoom stays clipped within the artwork frame. */
.color-story-image{transform:scale(1);transform-origin:center;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover) and (pointer:fine){.color-story.is-active:hover .color-story-image{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.color-story.is-active:hover .color-story-image{transform:none}}