/* Grade House Story — long-form copy split at each heading, each part beside
 * a picture in a notched frame; parts without a picture use the sheet layout
 * (heading in a narrow sticky column, text behind a hairline). */

.gh.story { --story-rule: var(--gh-blue); }
.gh.story .story__parts { display: grid; gap: clamp(64px, 7vw, 96px); }

/* part beside a picture */
.gh .story__part--pic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
/* long chapters: the picture stays in view while the text scrolls past */
.gh .story__part--pic .story__pic { position: sticky; top: calc(var(--gh-hdr) + 32px); }
.gh .story__part--flip .story__pic { order: -1; }
.gh .story__text { max-width: 620px; }
.gh .story__part--flip .story__text { justify-self: end; }
.gh.story .story__h { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; margin-bottom: 20px; }

/* first paragraph larger */
.gh.story--lead .story__part:first-child .story__body > p:first-child { font-size: var(--gh-fs-lead); line-height: 1.6; color: var(--gh-ink); }
.gh.story.tone-ink.story--lead .story__part:first-child .story__body > p:first-child { color: #fff; }

/* picture frame: square corners, two V notches cut into its edges */
.gh .story__pic { margin: 0; }
.gh .story__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--gh-paper-2); }
.gh .story__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gh .story__frame::before,
.gh .story__frame::after { content: ""; position: absolute; z-index: 1; width: 0; height: 0; border: 9px solid transparent; }
.gh .story__frame::before { left: 0; top: 38%; border-left-color: var(--gh-paper); }
.gh .story__frame::after { bottom: 0; left: 62%; border-bottom-color: var(--gh-paper); }
.gh.story.tone-card .story__frame::before { border-left-color: var(--gh-card-2); }
.gh.story.tone-card .story__frame::after { border-bottom-color: var(--gh-card-2); }
.gh.story.tone-ink .story__frame::before { border-left-color: var(--gh-ink-2); }
.gh.story.tone-ink .story__frame::after { border-bottom-color: var(--gh-ink-2); }
.gh .story__cap { margin-top: 12px; font: italic 400 15px/1.45 var(--gh-head); color: var(--gh-muted); }
.gh.story.tone-ink .story__cap { color: #A9ACB2; }

/* sheet layout: heading column + text behind a hairline */
.gh .story__part--sheet { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.gh .story__side { position: sticky; top: calc(var(--gh-hdr) + 24px); padding-top: 18px; border-top: 2px solid var(--story-rule); }
.gh .story__part--nohead .story__side { border-top: 0; padding-top: 0; }
.gh.story .story__part--sheet .story__h { margin-bottom: 0; }
.gh .story__part--sheet .story__body { max-width: 760px; padding-left: clamp(24px, 3vw, 44px); border-left: 1px solid var(--gh-line); }
.gh.story.tone-card .story__part--sheet .story__body { border-left-color: var(--gh-card-line); }
.gh.story.tone-ink .story__part--sheet .story__body { border-left-color: rgba(255, 255, 255, .16); }

/* leftover pictures */
.gh .story__rest { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

@media (max-width: 1024px) {
	.gh .story__part--sheet { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.gh .story__side { position: static; }
	.gh .story__part--sheet .story__body { padding-left: 0; border-left: 0; }
}
@media (max-width: 767px) {
	.gh.story .story__parts { gap: 48px; }
	.gh .story__part--pic { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.gh .story__part--pic .story__pic { order: -1; position: static; }
	.gh .story__part--flip .story__text { justify-self: start; }
	.gh.story .story__h { font-size: 26px; margin-bottom: 14px; }
}