/* Interactive portfolio stories. All interactions preserve native page scrolling. */
.story-qa,
.story-timeline,
.story-archive { min-width: 0; }
.story-eyebrow {
    display: block;
    color: var(--muted);
    font: 600 .6rem/1.5 var(--display);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.story-heading h3,
.story-timeline-header h3 {
    margin-top: .4rem;
    color: var(--white);
    font: 600 1.15rem/1.35 var(--display);
    letter-spacing: -.035em;
}
.story-notice {
    margin-top: .5rem;
    max-width: 48ch;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.6;
}
.story-qa { padding-left: clamp(1rem, 2.5vw, 1.8rem); border-left: 1px solid var(--line); }
.story-qa-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 1.25rem;
    gap: .25rem;
    border-bottom: 1px solid var(--line);
}
.story-qa-tabs button {
    position: relative;
    min-width: 0;
    min-height: 52px;
    padding: .35rem .15rem .7rem;
    color: var(--muted);
    font-size: .64rem;
    line-height: 1.5;
    text-align: left;
    transition: color .2s;
}
.story-qa-tabs button > span { display: block; margin-bottom: .15rem; color: inherit; font-size: .56rem; letter-spacing: .06em; }
.story-qa-tabs button::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.story-qa-tabs button[aria-selected="true"] { color: var(--white); }
.story-qa-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.story-qa-panel { min-height: 292px; padding-top: 1rem; }
.story-step-tag { color: var(--muted); font-size: .63rem; }
.story-qa-panel h4 { margin: .25rem 0 .55rem; color: var(--white); font: 600 1rem/1.45 var(--display); letter-spacing: -.025em; }
.story-qa-panel > p { color: var(--body); font-size: .78rem; line-height: 1.75; }
.story-evidence { margin-top: .85rem; padding: .75rem .85rem; border-left: 2px solid var(--line-strong); background: rgba(255, 255, 255, .025); }
.story-evidence > strong { color: var(--white); font-size: .67rem; font-weight: 500; }
.story-evidence ul { margin: .4rem 0 0; padding-left: .9rem; }
.story-evidence li { padding-left: .1rem; color: var(--body); font-size: .7rem; line-height: 1.65; }
.story-evidence li + li { margin-top: .25rem; }
.story-qa-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; gap: .75rem; }
.story-qa-navigation > span { color: var(--muted); font-size: .65rem; font-variant-numeric: tabular-nums; }
.story-qa-navigation button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--white); transition: border-color .2s, background .2s; }
.story-qa-navigation button:disabled { opacity: .3; cursor: default; }
.story-text-link { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; color: var(--white); text-decoration: none; font-size: .7rem; font-weight: 500; }
.story-text-link span { transition: transform .2s; }
.story-timeline { margin-bottom: 1.5rem; border-block: 1px solid var(--line); }
.story-timeline-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: 1rem 0 .75rem; }
.story-timeline-header h3 { margin: 0; font-size: .9rem; }
.story-timeline-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.story-timeline-tabs button { position: relative; display: grid; align-content: start; justify-items: start; gap: .65rem; min-width: 0; min-height: 106px; padding: .7rem .5rem .9rem 0; text-align: left; }
.story-timeline-tabs button::before { content: ""; position: absolute; top: 42px; left: 0; right: 0; height: 1px; background: var(--line-strong); }
.story-timeline-tabs button:last-child::before { right: calc(100% - 8px); }
.story-timeline-date { color: var(--muted); font-size: .63rem; line-height: 1.4; text-transform: uppercase; letter-spacing: .045em; }
.story-timeline-dot { position: relative; z-index: 1; width: 7px; height: 7px; margin: 0 0 .1rem; border: 1px solid #7a7a7a; border-radius: 50%; background: var(--bg); transition: background .25s, border-color .25s, box-shadow .25s; }
.story-timeline-tabs strong { color: var(--body); font: 500 .72rem/1.5 var(--copy); }
.story-timeline-tabs [aria-selected="true"] .story-timeline-dot { background: var(--white); border-color: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .07); }
.story-timeline-tabs [aria-selected="true"] strong,
.story-timeline-tabs [aria-selected="true"] .story-timeline-date { color: var(--white); }
.story-timeline-tabs .story-planned::before { background: none; border-top: 1px dashed var(--line-strong); }
.story-timeline-panel { display: flex; align-items: center; min-height: 90px; padding: .85rem 0 1rem; border-top: 1px solid var(--line); }
.story-timeline-panel > p { max-width: 76ch; color: var(--body); font-size: .78rem; line-height: 1.7; }
.story-planned-label { display: inline-block; margin-right: .65rem; padding: .05rem .45rem; border: 1px dashed var(--line-strong); border-radius: 3px; color: var(--white); font-size: .6rem; vertical-align: .05rem; }
.story-archive { margin-top: 1.5rem; border-block: 1px solid var(--line); }
.story-archive summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 90px; padding: 1rem 0; list-style: none; cursor: pointer; }
.story-archive summary::-webkit-details-marker { display: none; }
.story-archive summary strong { display: block; margin-top: .3rem; color: var(--white); font: 600 1rem/1.45 var(--display); letter-spacing: -.025em; }
.story-archive-toggle { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .68rem; }
.story-chevron { width: 20px; height: 20px; flex: 0 0 20px; transition: transform .25s var(--ease); }
.story-archive details[open] .story-chevron { transform: rotate(180deg); }
.story-archive-content { padding-bottom: .5rem; }
.story-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.story-filters button { min-height: 36px; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: .67rem; transition: color .2s, border-color .2s, background .2s; }
.story-filters [aria-pressed="true"] { border-color: var(--line-strong); background: var(--panel-3); color: var(--white); }
.story-event-note { max-width: 100ch; margin: 1rem 0 .25rem; color: var(--muted); font-size: .7rem; line-height: 1.7; }
.story-archive-list { list-style: none; margin: .85rem 0 0; padding: 0; }
.story-archive-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.story-archive-icon { display: grid; place-items: center; margin-top: .2rem; width: 42px; height: 42px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel-2); }
.story-archive-icon img { width: 100%; height: 100%; object-fit: cover; }
.story-archive-icon img[src*="aponic-logo"] { object-fit: contain; padding: 5px; }
.story-archive-icon > span { color: var(--white); font-size: 1.15rem; }
.story-archive-date { float: right; margin: .1rem 0 .3rem 1rem; color: var(--muted); font-size: .63rem; letter-spacing: .035em; }
.story-archive-copy h4 { color: var(--white); font: 600 .84rem/1.6 var(--display); letter-spacing: -.015em; }
.story-archive-copy p { margin-top: .15rem; color: var(--muted); font-size: .72rem; line-height: 1.6; }
.story-archive-copy a { margin-top: .45rem; font-size: .65rem; }
.story-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (hover: hover) {
    .story-qa-tabs button:hover,
    .story-timeline-tabs button:hover strong,
    .story-filters button:hover { color: var(--white); }
    .story-qa-navigation button:hover:not(:disabled) { border-color: var(--white); background: var(--panel-2); }
    .story-text-link:hover span { transform: translateX(3px); }
}
@media (max-width: 800px) {
    .story-qa { margin-top: .5rem; padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
    .story-qa-panel { min-height: 240px; }
    .story-timeline-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem .5rem; }
    .story-timeline-tabs button:nth-child(3)::before { right: calc(100% - 8px); }
}
@media (max-width: 480px) {
    .story-qa-tabs button { font-size: .57rem; }
    .story-qa-panel { min-height: 350px; }
    .story-qa-navigation button { width: 44px; height: 44px; }
    .story-timeline-tabs strong { font-size: .65rem; }
    .story-timeline-date { font-size: .58rem; }
    .story-timeline-header { display: block; }
    .story-timeline-header h3 { margin-top: .4rem; }
    .story-archive-toggle > span { display: none; }
    .story-archive-list li { grid-template-columns: 36px minmax(0, 1fr); gap: .7rem; }
    .story-archive-icon { width: 36px; height: 36px; }
    .story-archive-date { display: block; float: none; margin: 0 0 .3rem; }
    .story-filters button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .story-qa *, .story-timeline *, .story-archive *, .story-qa *::after { animation: none !important; transition: none !important; }
}