.roscoe-hero { padding: 0; gap: 0; display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, .6fr); max-inline-size: var(--content-width); margin-inline: auto; }
.roscoe-hero__copy { container-type: inline-size; padding: var(--space-l) var(--space-m) var(--space-l) var(--site-padding); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-s); min-inline-size: 0; }
.roscoe-hero__eyebrow { font-family: var(--font-heading); font-size: var(--text-m); color: var(--primary); margin: 0; }
.roscoe-hero__name { font-size: clamp(var(--h2), 35cqi, calc(var(--h1) * 1.6)); max-inline-size: 100%; margin: 0; }
.roscoe-hero__subtitle { font-size: clamp(var(--text-l), 8cqi, var(--h3)); max-inline-size: 100%; color: var(--primary); margin: 0; }
.roscoe-hero__quote { margin: var(--space-xs) 0 0; font-size: var(--text-xl); font-style: italic; & p { margin: 0; font-size: inherit; } }
.roscoe-hero__brush { display: block; inline-size: 45%; block-size: var(--space-xs); background: var(--accent); clip-path: polygon(0 70%, 7% 35%, 23% 15%, 45% 2%, 73% 10%, 100% 65%, 76% 48%, 48% 50%, 20% 78%, 0 100%); }
.roscoe-hero__intro { font-size: var(--text-m); margin: var(--space-xs) 0; }
.roscoe-hero__link { gap: var(--space-m); text-decoration: none; margin-block-start: var(--space-xs); border-block-end: var(--space-xxs) solid var(--accent); }
.roscoe-hero__photo { margin: 0; min-inline-size: 0; min-block-size: 100%; }
.roscoe-hero__image { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.roscoe-journey { max-inline-size: var(--content-width); margin-inline: auto; padding: var(--space-l) var(--site-padding); }
.roscoe-journey__title { display: flex; align-items: center; justify-content: center; gap: var(--space-m); font-size: var(--h3); text-align: center; margin-block: 0 var(--space-l); &::before, &::after { content: ''; block-size: var(--border-width); background: var(--accent); flex: 1; } }
.roscoe-journey__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-m); }
.roscoe-journey__chapter { text-decoration: none; color: var(--base); padding-inline-end: var(--space-m); border-inline-end: var(--border-width) solid var(--accent); &:last-child { border-inline-end: 0; padding-inline-end: 0; } & h3 { font-size: var(--text-l); text-transform: uppercase; color: var(--primary); margin-block: 0 var(--space-xs); } & p { margin: 0; font-style: italic; } &:hover h3 { color: var(--accent); } }
.roscoe-journey__number { color: var(--accent); font-family: var(--font-primary); font-style: italic; }
.roscoe-journey__quote { margin: var(--space-l) 0 0; text-align: center; font-style: italic; font-size: var(--text-xxl); & p { margin-block: var(--space-s); font-size: inherit; } }
.roscoe-journey__quote .roscoe-journey__farewell { font-size: var(--text-l); }
.training-journal { max-inline-size: var(--content-width); margin-inline: auto; padding: var(--space-l) var(--site-padding) var(--section-space-s); border-block-start: var(--border); }
.training-journal__heading { margin-block-end: var(--space-l); & h2 { font-size: var(--h3); margin-block: var(--space-xs); } }
.training-journal__eyebrow { color: var(--primary); font-family: var(--font-heading); font-size: var(--text-s); margin-block: 0 var(--space-xs); }
.training-journal__article { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-l); align-items: center; }
.training-journal__photo { display: block; overflow: hidden; & img { inline-size: 100%; block-size: auto; display: block; } }
.training-journal__copy { & h3 { font-size: var(--h3); margin-block: var(--space-s); & a { color: var(--base); text-decoration: none; } } & p { margin-block: var(--space-s); } }
.training-article { max-inline-size: var(--content-width); margin-inline: auto; padding: var(--space-l) var(--site-padding) var(--section-space-s); }
.training-article__back { font-family: var(--font-heading); color: var(--accent); text-decoration: none; display: inline-block; margin-block: var(--space-s); }
.training-article__header { max-inline-size: var(--content-width-inset); margin: var(--space-l) auto; & h1 { font-size: clamp(var(--h2), 6vw, var(--h1)); text-transform: uppercase; } }
.training-article__intro { font-size: var(--text-xl); font-style: italic; }
.training-article__photo { margin: var(--space-l) 0; & img { inline-size: 100%; block-size: auto; } & figcaption { color: var(--primary); font-size: var(--text-s); margin-block-start: var(--space-xs); } }
.training-article__body { max-inline-size: var(--content-width-inset); margin-inline: auto; font-size: var(--text-l); & section { margin-block: var(--space-l); scroll-margin-block-start: var(--space-l); } & h2 { font-size: var(--h3); color: var(--primary); } }
@media (max-width: 1000px) { .roscoe-hero__copy { container-type: inline-size; padding: var(--space-m); gap: var(--space-xs); } .roscoe-hero__eyebrow { font-size: var(--text-s); } .roscoe-hero__quote { font-size: var(--text-l); } .roscoe-hero__intro { font-size: var(--text-m); } .roscoe-journey__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-l); } .roscoe-journey__chapter:nth-child(2) { border-inline-end: 0; } }
@media (max-width: 760px) { .roscoe-hero { grid-template-columns: minmax(0,1fr); } .roscoe-hero__copy { container-type: inline-size; padding: var(--space-l) var(--site-padding); gap: var(--space-s); } .roscoe-hero__image { block-size: auto; object-fit: contain; } .roscoe-hero__photo { min-block-size: 0; } .roscoe-hero__quote { font-size: var(--text-xl); } .roscoe-hero__intro { font-size: var(--text-m); } .training-journal__article { grid-template-columns: minmax(0,1fr); gap: var(--space-m); } .roscoe-journey__title { font-size: var(--h4); gap: var(--space-s); } .roscoe-journey__quote { font-size: var(--text-xl); } }
@media (max-width: 440px) { .roscoe-journey__grid { grid-template-columns: minmax(0,1fr); gap: var(--space-m); } .roscoe-journey__chapter { border-inline-end: 0; border-block-end: var(--border); padding-block-end: var(--space-m); padding-inline-end: 0; &:last-child { border-block-end: 0; } } }
.roscoe-story { font-size: var(--text-m); max-inline-size: min(65ch, var(--content-width-inset)); }
.roscoe-story__byline { color: var(--primary); font-size: var(--text-s); padding-block-end: var(--space-s); border-block-end: var(--border); }
.roscoe-story__contents { margin-block: var(--space-l); padding-block: var(--space-m); border-block: var(--border-width) solid var(--primary); & ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(6,auto); grid-auto-flow: column; column-gap: var(--space-l); } & li { margin: 0; border-block-end: var(--border-width) solid var(--primary-20); &:nth-child(6), &:last-child { border-block-end: 0; } } & a { display: grid; grid-template-columns: var(--space-l) minmax(0,1fr); align-items: baseline; gap: var(--space-xs); min-block-size: var(--tap-target); padding-block: var(--space-s); color: var(--primary); font-size: var(--text-m); text-decoration: none; &:hover { color: var(--accent); } &:focus-visible { outline: var(--focus-width) var(--focus-style) var(--focus-color); outline-offset: var(--focus-offset); } } }
.roscoe-story__contents-title { font-size: var(--h4); color: var(--primary); margin-block: 0 var(--space-m); }
.roscoe-story__contents-number { font-family: var(--font-heading); color: var(--accent); font-size: var(--text-l); }
.roscoe-story__introduction { max-inline-size: min(65ch,var(--content-width-inset)); font-size: var(--text-m); margin-block: var(--space-l); & p { margin-block: var(--space-s); } }
.roscoe-story__chapter { padding-block-start: var(--space-l); border-block-start: var(--border); & h2 { margin-block: var(--space-xs) var(--space-m); } & p { margin-block: var(--space-s); } }
.roscoe-story__number { font-family: var(--font-heading); color: var(--accent); font-size: var(--h4); }
.roscoe-story__chapter-link { font-family: var(--font-heading); color: var(--accent); font-size: var(--text-s); text-decoration: none; display: inline-block; padding-block: var(--space-xs); margin-block-start: var(--space-s); &:hover { text-decoration: underline; } }
@media (max-width: 600px) { .roscoe-story__contents ol { grid-template-columns: minmax(0,1fr); grid-template-rows: none; grid-auto-flow: row; } .roscoe-story__contents li:nth-child(6) { border-block-end: var(--border-width) solid var(--primary-20); } }

.roscoe-story__photo { margin: var(--space-l) 0; & img { display: block; inline-size: 100%; block-size: auto; } & figcaption { font-family: var(--font-primary); font-size: var(--text-s); font-style: italic; color: var(--primary); padding-block-start: var(--space-s); } }
.story-photos { margin-block: var(--space-l); & .roscoe-story__photo { margin: 0; } }
.story-photos--group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-m); align-items: start; }
.story-photos--portrait { max-inline-size: calc(var(--content-width) * .37); margin-inline: auto; }
@media (max-width: 600px) { .story-photos--group { grid-template-columns: minmax(0,1fr); } }

.story-photos--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 600px) { .story-photos--three { grid-template-columns: minmax(0,1fr); } }

.training-conviction { max-inline-size: calc(var(--content-width) - var(--site-padding) * 2); margin: var(--space-m) var(--site-padding) var(--space-l); padding: var(--space-l); background: var(--primary); color: var(--neutral); border-inline-start: var(--space-xs) solid var(--accent); & p { margin: 0; font-size: var(--text-xxl); font-style: italic; color: inherit; text-align: center; } }
@media (min-width: 1300px) { .training-conviction { margin-inline: auto; } }

.training-article--roscoe { display: block; }
.roscoe-story-hero { display: grid; grid-template-columns: minmax(0,.43fr) minmax(0,.57fr); gap: var(--space-l); align-items: center; margin-block: var(--space-m) var(--space-l); }
.roscoe-story-hero__copy { container-type: inline-size; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.roscoe-story-hero__name { font-size: clamp(var(--h2),35cqi,calc(var(--h1) * 1.6)); max-inline-size: 100%; margin: 0; }
.roscoe-story-hero__subtitle { font-size: clamp(var(--text-l),8cqi,var(--h3)); max-inline-size: 100%; color: var(--primary); text-transform: uppercase; margin: 0; }
.roscoe-story-hero__deck { font-size: var(--text-l); font-style: italic; margin: 0; }
.roscoe-story-hero__introduction { margin: 0; & p { margin: 0 0 var(--space-s); } & p:first-child { font-size: var(--text-l); } & p:last-child { margin-block-end: 0; } }
.roscoe-story-hero__byline { margin: var(--space-xs) 0 0; padding-block-start: var(--space-s); border-block-start: var(--border); color: var(--primary); font-size: var(--text-s); }
.roscoe-story-hero__photo { margin: 0; min-inline-size: 0; & img { display: block; inline-size: 100%; block-size: auto; } & figcaption { color: var(--primary); font-size: var(--text-s); padding-block-start: var(--space-xs); } }
@media (max-width: 800px) { .roscoe-story-hero { grid-template-columns: minmax(0,1fr); gap: var(--space-m); } .roscoe-story-hero__copy { max-inline-size: min(65ch,100%); } .roscoe-story-hero__name { font-size: clamp(var(--h2),30cqi,calc(var(--h1) * 1.4)); } .roscoe-story-hero__subtitle { font-size: clamp(var(--text-l),7cqi,var(--h3)); } }
.training-article--essay { display: block; & .training-article__header { max-inline-size: min(65ch,var(--content-width-inset)); font-size: var(--text-m); margin-block: var(--space-m); } }
.training-essay { max-inline-size: min(65ch,var(--content-width-inset)); font-size: var(--text-m); }
.training-essay__byline { font-size: var(--text-s); color: var(--primary); border-block-end: var(--border); padding-block-end: var(--space-s); margin-block: 0 var(--space-m); }
.training-essay__introduction { & p { margin-block: var(--space-s); } & p:first-child { font-size: var(--text-l); } }
.training-essay__contents { & ol { grid-template-rows: repeat(4,auto); } & li:nth-child(4) { border-block-end: 0; } & li:nth-child(6) { border-block-end: var(--border-width) solid var(--primary-20); } & a { text-transform: none; } }
.training-essay__section { padding-block-start: var(--space-m); border-block-start: var(--border); & h2 { margin-block: 0 var(--space-m); } & p { margin-block: var(--space-s); } }
.training-essay__pullquote { margin: var(--space-l) 0; padding: var(--space-m); border-inline-start: var(--space-xs) solid var(--accent); background: var(--primary-10); & p { font-size: var(--text-l); font-style: italic; color: var(--primary); margin: 0; } }
.training-essay__story-link { color: var(--primary); text-decoration-color: var(--accent); text-underline-offset: var(--space-xxs); }
.training-essay__closing { text-align: center; margin-block: var(--space-l); padding-block: var(--space-m); border-block: var(--border-width) solid var(--primary); & p { margin-block: var(--space-s); } }
.training-essay__motto { font-size: var(--h4); color: var(--primary); }
@media (max-width: 600px) { .training-essay__contents ol { grid-template-rows: none; } .training-essay__contents li:nth-child(4) { border-block-end: var(--border-width) solid var(--primary-20); } }