/* Projects: reading-led case stories within the existing portfolio design. */
.stories-shell { max-width: 960px; }
.story-contents { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; padding: 1.65rem 0; border-bottom: 1px solid var(--line); }
.story-contents a { display: inline-flex; align-items: center; gap: .65rem; padding: .3rem 0; color: var(--ink); font-size: .9rem; text-decoration: none; }
.story-contents a:hover { color: var(--coral-text); }
.story-contents a span:first-child { color: var(--coral-text); font-family: var(--display); font-size: 1.1rem; }
.story-contents a span:last-child { color: var(--green); }
.project-story { padding: clamp(3.2rem, 7vw, 5.6rem) 0; scroll-margin-top: 100px; }
.project-story + .project-story { border-top: 1px solid var(--line); }
.story-heading { max-width: 790px; }
.story-heading h2 { font-size: clamp(2.15rem, 4.4vw, 3.7rem); line-height: 1.12; }
.story-role { margin: 1.1rem 0 .9rem; color: var(--muted); font-size: .88rem; }
.story-opening { max-width: 730px; margin: 0; color: #3f5d5e; font-size: 1.08rem; line-height: 1.8; }
.story-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .48fr); gap: clamp(2rem, 4vw, 3.7rem); align-items: start; margin-top: 2.5rem; }
.story-narrative { min-width: 0; }
.story-thought { margin: 0 0 2.4rem; padding-left: 1rem; border-left: 2px solid var(--coral); color: var(--ink); font-family: var(--display); font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.45; }
.story-step + .story-step { margin-top: 2.05rem; }
.story-step h3 { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); align-items: baseline; gap: .35rem; font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.3; }
.story-step h3 > span { color: var(--coral-text); font-family: var(--body); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.story-step p { margin: .65rem 0 0; color: #476162; font-size: 1rem; line-height: 1.85; }
.story-aside { position: sticky; top: 108px; min-width: 0; }
.principle-figure { margin: 0; padding: 1.3rem 0 1.2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.principle-diagram { display: block; width: 100%; height: auto; max-width: 360px; margin: 0 auto; overflow: visible; }
.diagram-numbers { fill: var(--green); font: 600 16px var(--display); }
.diagram-labels { fill: var(--ink); font: 500 15px var(--body); }
.diagram-center { fill: var(--ink); font: 600 18px var(--display); }
.diagram-cycle { fill: #ffffff; font: 500 14px var(--body); }
.learning-arc { fill: none; stroke: var(--green); stroke-width: 1.5; }
.principle-figure figcaption { max-width: 280px; margin: .9rem auto 0; color: var(--muted); font-size: .84rem; line-height: 1.6; text-align: center; }
.story-ending { max-width: 670px; margin: 2.75rem 0 0; padding: 1.3rem 0 0; border-top: 1px solid var(--line); }
.ending-label { margin: 0 0 .55rem; color: var(--green); font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.story-ending > p:nth-child(2) { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.8; }
.story-reflection { margin: 1.15rem 0 0; color: var(--muted); font-family: var(--display); font-size: 1.1rem; line-height: 1.55; font-style: italic; }
.projects-research-link { margin: 0; padding: 1.5rem 0 clamp(3rem, 7vw, 5.2rem); border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
.projects-research-link a { color: var(--coral-text); }

.project-story--startup .story-layout { display: block; max-width: 670px; }
.story-ending--keepsake { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 2.5rem; align-items: center; max-width: none; }
.ending-copy > p:nth-child(2) { margin: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.8; }
.startup-keepsake { min-width: 0; margin: 0; }
.keepsake-crop { position: relative; overflow: hidden; aspect-ratio: 4 / 3; width: 100%; }
.keepsake-crop img { position: absolute; display: block; width: 189.62963%; height: auto; max-width: none; left: -50%; top: -50.61728%; }
.startup-keepsake figcaption { margin-top: .75rem; color: var(--muted); font-size: .84rem; line-height: 1.6; }
.story-opening, .story-step p { color: var(--muted); }

@media (max-width: 820px) {
  .story-layout { grid-template-columns: 1fr; gap: 2rem; }
  .story-aside { position: static; grid-row: 1; }
  .principle-figure { max-width: 420px; margin: 0 auto; padding: .9rem 0; }
  .principle-diagram { max-width: 300px; }
  .principle-figure figcaption { max-width: 360px; }
  .story-opening, .story-narrative, .story-ending { max-width: 670px; }
  .story-ending--keepsake { grid-template-columns: 1fr; gap: 1.8rem; }
  .startup-keepsake { max-width: 450px; }
}
@media (max-width: 480px) {
  .story-contents { display: grid; gap: .2rem; }
  .story-contents a { width: fit-content; }
  .story-heading h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .project-story { scroll-margin-top: 85px; }
  .story-layout { margin-top: 1.8rem; }
  .story-opening { font-size: 1rem; line-height: 1.8; }
  .story-step h3 { font-size: 1.35rem; }
  .story-step p { font-size: .97rem; }
}