/* Supporting pages share the homepage's palette, type, navigation, and footer. */
.interior { padding-bottom: 75px; }
.page-intro { padding: 76px 0 65px; max-width: 850px; }
.page-intro h1 { max-width: 850px; }
.page-lede { max-width: 680px; font-size: 20px; color: var(--muted); margin-top: 28px; }
.intro-note { color: var(--muted); }
.status-note { font-size: 13px; color: var(--muted); border-left: 2px solid var(--accent-warm); padding-left: 15px; max-width: 680px; margin-top: 25px; }
.back-link { display: inline-block; margin-top: 35px; font-size: 13px; text-decoration: none; }
.back-link + .page-intro { padding-top: 40px; }
.page-section { padding-block: 75px; }
.section-lede { color: var(--muted); max-width: 650px; margin-top: 22px; }
.project-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.project-card { border: 1px solid var(--line); display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; }
.card-art { min-height: 240px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.card-art span { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.card-art strong { font: 29px/1.12 var(--serif); letter-spacing: -.035em; }
.family-art { background: #cbded8; }
.assistant-art { background: #1b6064; color: #fffaf2; }
.content-art { background: #eae0d2; }
.card-copy { padding: 27px; display: flex; flex-direction: column; flex-grow: 1; }
.card-copy .eyebrow { font-size: 10px; margin-bottom: 15px; }
.card-copy h3 { font-size: 29px; }
.card-copy p:not(.eyebrow) { color: var(--muted); font-size: 15px; margin-top: 18px; margin-bottom: 20px; }
.card-copy .text-link { align-self: flex-start; margin-top: auto; }
.project-list { margin-top: 35px; border-top: 1px solid var(--line); }
.project-list > a { display: grid; grid-template-columns: .8fr 1.1fr 1.4fr 25px; align-items: center; gap: 25px; padding: 30px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.project-list .eyebrow { margin: 0; font-size: 10px; }
.project-list h3 { font-size: 25px; }
.project-list p { font-size: 14px; color: var(--muted); }
.project-list > a:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
.project-list > a > span:last-child { font-size: 25px; }
.opportunity { background: #e4ede8; padding: 45px; margin-block: 30px 10px; border-radius: 4px; }
.opportunity h2 { font-size: clamp(32px, 3.5vw, 46px); max-width: 750px; }
.opportunity > p:not(.eyebrow) { max-width: 650px; color: var(--muted); margin-top: 20px; }
.story-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 75px; border-top: 1px solid var(--line); padding-top: 45px; }
.story-facts dl { margin: 0; }
.story-facts dt { font-size: 13px; font-weight: 600; margin-top: 23px; }
.story-facts dd { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.story-copy { color: var(--muted); }
.story-copy section + section { margin-top: 42px; }
.story-copy h2 { font-size: 35px; color: var(--ink); margin-bottom: 22px; }
.story-copy p { max-width: 67ch; }
.reading-width { max-width: 750px; margin-inline: auto; }
.workflow-section { padding-block: 65px; }
.workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 30px 0 0; list-style: none; background: #e4ede8; border-radius: 4px; }
.workflow li { padding: 30px; }
.workflow li + li { border-left: 1px solid #c5d4cf; }
.workflow li > span { color: var(--accent); font-size: 12px; }
.workflow h3 { font-size: 27px; margin: 16px 0; }
.workflow p { color: var(--muted); font-size: 15px; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px; margin-top: 30px; }
.related-grid > a { border-top: 1px solid var(--line); padding-top: 25px; text-decoration: none; }
.related-grid h3 { font-size: 29px; }
.related-grid p { font-size: 15px; color: var(--muted); margin-top: 15px; }
.related-grid > a:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
.sample-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; margin-top: 30px; }
.sample-posts img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 4px; }
.sample-posts figcaption { font-size: 12px; margin-top: 10px; color: var(--muted); }
.ways-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; margin-top: 35px; }
.ways-grid article { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 20px; }
.way-number { font: italic 30px var(--serif); color: var(--accent-warm); }
.ways-grid h3 { font-size: 31px; margin: 18px 0; }
.ways-grid p { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
.ways-grid .text-link { align-self: flex-start; margin-top: auto; }
.split-section { display: grid; grid-template-columns: 1fr 1.2fr; gap: 75px; }
.split-section h2 { font-size: 43px; }
.proof-band { background: #eae0d2; padding: 45px; border-radius: 4px; }
.proof-band > p:not(.eyebrow) { max-width: 620px; color: var(--muted); margin-top: 22px; }
.proof-band .related-grid > a { border-color: #c8bfae; }
.resource-note { border-block: 1px solid var(--line); padding: 30px 0; max-width: 750px; margin-inline: auto; }
.resource-note h3 { font-size: 30px; }
.resource-note > p:not(.eyebrow) { color: var(--muted); margin-top: 18px; }
.page-contact { padding-bottom: 20px; }
.contact-footnote { font-size: 13px; }
.contact-link { overflow-wrap: anywhere; }
details { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 25px; }
summary { color: var(--ink); cursor: pointer; font-weight: 600; }
summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
details[open] summary { margin-bottom: 15px; }
/* Existing technical examples and calculator retain their specialized layouts. */
:root { --amber: var(--accent); --amber-bright: #10494d; --paper-deep: #e4ede8; --ink-soft: var(--muted); --ink-faint: #5c6c65; --card: #fffaf2; }
.legacy main.wrap { max-width: 850px; padding: 0 28px 65px; }
.legacy main > .hero { display: block; padding: 55px 0 30px; }
.legacy main > .back-link + .hero { padding-top: 30px; }
.legacy main .hero h1 { font-size: clamp(40px, 5vw, 64px); }
.legacy main h2 { font-size: 32px; margin: 45px 0 20px; }
.legacy main h3 { font-size: 25px; }
.legacy main p + p { margin-top: 16px; }
.legacy main .eyebrow { font-family: var(--sans); }
.legacy main .hero .lede { max-width: 65ch; }
.legacy main .opportunity h2 { margin: 0; font-size: 36px; }
.legacy main .opportunity .eyebrow { margin-top: 0; }
.legacy .project-visual img, .legacy .portrait img, .legacy .postgrid img { filter: none; }
.legacy .footer { margin-top: 0; }
.legacy .footer .wordmark { color: var(--ink); }
.legacy main .flow b { font-family: var(--sans); font-weight: 600; }
.legacy main .flowlab .with-sub { font-size: 28px; }
@media (max-width: 1000px) {
  .project-cards { gap: 16px; }
  .card-art, .card-copy { padding: 22px; }
  .story-layout, .split-section { gap: 40px; }
  .ways-grid { gap: 24px; }
  .ways-grid h3 { font-size: 27px; }
}
@media (max-width: 720px) {
  .interior { padding-bottom: 45px; }
  .page-intro { padding: 45px 0; }
  .page-lede { font-size: 18px; }
  .page-section { padding-block: 50px; }
  .project-cards, .ways-grid, .story-layout, .split-section, .workflow, .related-grid { grid-template-columns: 1fr; }
  .project-cards { gap: 30px; }
  .card-art { min-height: 200px; }
  .card-art strong { font-size: 34px; }
  .card-copy { padding: 25px; }
  .card-copy h3 { font-size: 31px; }
  .card-copy .text-link { margin-top: 10px; }
  .project-list > a { grid-template-columns: 1fr 25px; gap: 15px; }
  .project-list .eyebrow, .project-list h3, .project-list p { grid-column: 1; }
  .project-list > a > span:last-child { grid-column: 2; grid-row: 1 / 4; }
  .opportunity, .proof-band { padding: 30px 24px; }
  .story-layout { gap: 35px; }
  .story-facts { padding: 0 0 25px; border-bottom: 1px solid var(--line); }
  .story-facts .eyebrow { margin-bottom: 15px; }
  .story-copy h2 { font-size: 31px; }
  .workflow-section { padding-block: 45px; }
  .workflow li + li { border-left: 0; border-top: 1px solid #c5d4cf; }
  .sample-posts { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .ways-grid { gap: 30px; }
  .ways-grid h3 { font-size: 31px; }
  .ways-grid .text-link { margin-top: 5px; }
  .split-section { gap: 25px; }
  .split-section h2 { font-size: 39px; }
  .contact-link { gap: 12px; font-size: clamp(19px, 5.5vw, 27px); }
  .page-contact h2 { font-size: 49px; }
  .legacy main.wrap { padding-inline: 20px; }
  .legacy main .opportunity h2 { font-size: 31px; }
}

/* Keep the older long-form examples readable within the shared type system. */
.legacy main .hero h1 { margin-bottom: 22px; }
.legacy main h3 { margin: 25px 0 10px; }
.legacy main p { margin: 13px 0; }
.legacy main .eyebrow { margin: 0 0 20px; }
.legacy main .flow p { margin: .3rem 0 0; }
.legacy main .opportunity .eyebrow { margin-bottom: 20px; }
@media (max-width: 720px) {
  /* The desktop scroll emphasis scales text beyond its mobile column. */
  .legacy .flow.deep.focusable > li.is-active > b { transform: none; }
}

/* Beginner mentorship: a bounded first session alongside the build offers. */
.mentorship-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 65px; max-width: none; align-items: center; }
.mentorship-intro h1 { font-size: clamp(44px, 4.8vw, 67px); }
.first-session { padding: 35px; background: #e4ede8; border-radius: 4px; }
.first-session .heading-flower { display: block; font-size: 45px; margin-bottom: 23px; }
.first-session h2 { font-size: 37px; }
.first-session dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-block: 1px solid #c5d4cf; padding-block: 20px; margin-block: 25px; font-size: 13px; }
.first-session dt { color: var(--muted); }
.first-session dd { margin: 0; font-weight: 600; }
.first-session > p:last-child { font-size: 13px; color: var(--muted); }
.mentor-section { display: grid; grid-template-columns: 260px 1fr; gap: 65px; align-items: center; border-top: 1px solid var(--line); }
.mentor-section img { width: 100%; height: auto; display: block; border-radius: 50%; }
.mentor-section .story-copy { max-width: 710px; }
.mentorship-paths { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; margin-top: 32px; }
.mentorship-paths article { display: flex; flex-direction: column; border-top: 1px solid #c8bfae; padding-top: 24px; }
.mentorship-paths h3 { font-size: 27px; }
.mentorship-paths p { font-size: 15px; color: var(--muted); margin-top: 18px; margin-bottom: 20px; }
.mentorship-paths .text-link { margin-top: auto; align-self: flex-start; }
.mentorship-faq { max-width: 800px; margin-inline: auto; }
.mentorship-faq details p { color: var(--muted); }
.beginner-invitation { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; background: #e4ede8; padding: 35px; margin-bottom: 65px; border-radius: 4px; }
.beginner-invitation h2 { font-size: 35px; }
.beginner-invitation p:not(.eyebrow) { color: var(--muted); margin-top: 18px; max-width: 620px; }
.beginner-invitation .button { margin: 0; white-space: nowrap; }
@media (max-width: 850px) {
  .mentorship-intro { gap: 35px; grid-template-columns: 1fr 1fr; }
  .first-session { padding: 27px; }
  .first-session h2 { font-size: 32px; }
  .beginner-invitation { grid-template-columns: 1fr; gap: 25px; }
  .beginner-invitation .button { justify-self: start; }
}
@media (max-width: 720px) {
  .mentorship-intro, .mentor-section, .mentorship-paths { grid-template-columns: 1fr; }
  .mentorship-intro { gap: 35px; }
  .mentor-section { gap: 30px; }
  .mentor-section figure { max-width: 180px; }
  .first-session h2 { font-size: 36px; }
  .mentorship-paths { gap: 30px; }
  .beginner-invitation { padding: 28px 24px; margin-bottom: 45px; }
  .beginner-invitation h2 { font-size: 32px; }
  .beginner-invitation .button { white-space: normal; }
}