{"id":2682,"date":"2026-05-25T16:03:20","date_gmt":"2026-05-25T21:03:20","guid":{"rendered":"https:\/\/yfc.ca\/steinbach\/?page_id=2682"},"modified":"2026-06-04T14:00:01","modified_gmt":"2026-06-04T19:00:01","slug":"youth-stories","status":"publish","type":"page","link":"https:\/\/yfc.ca\/steinbach\/youth-stories\/","title":{"rendered":"Youth Stories"},"content":{"rendered":"\n\n<style>\n  \/* -------------------------------------------------------------\n   * YFC Steinbach \u2014 Youth Stories\n   * All styles scoped under .yfcs to avoid clashing with the WP theme.\n   * ------------------------------------------------------------- *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Lora:ital,wght@0,400;1,400;1,500&display=swap');\n\n  .yfcs {\n    --yfcs-red: #E31837;\n    --yfcs-red-dark: #B81229;\n    --yfcs-red-pale: #FDEBEE;\n    --yfcs-ink: #14140F;\n    --yfcs-ink-2: #3a3a35;\n    --yfcs-ink-3: #6b6b65;\n    --yfcs-ink-4: #a8a8a2;\n    --yfcs-paper: #ffffff;\n    --yfcs-paper-2: #F2EFE6;\n    --yfcs-line: #1a1a14;\n    --yfcs-hairline: #e3e0d5;\n\n    --yfcs-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    --yfcs-serif: 'Lora', Georgia, serif;\n\n    \/* override these from the theme if your WP site has a fixed header *\/\n    --yfcs-sticky-top: 24px;\n    --yfcs-jump-offset: 80px;\n\n    font-family: var(--yfcs-sans);\n    color: var(--yfcs-ink);\n    background: var(--yfcs-paper);\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n    text-rendering: optimizeLegibility;\n    box-sizing: border-box;\n    overflow-x: clip;\n  }\n  .yfcs *, .yfcs *::before, .yfcs *::after { box-sizing: inherit; }\n\n  \/* ---- Page wrap ---- *\/\n  .yfcs__wrap {\n    max-width: 1240px;\n    margin: 0 auto;\n    padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(48px, 6vw, 96px);\n  }\n\n  \/* ---- Header \/ Intro ---- *\/\n  .yfcs__eyebrow {\n    display: inline-flex; align-items: center; gap: 10px;\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    color: var(--yfcs-red);\n    margin-bottom: 18px;\n  }\n  .yfcs__eyebrow::before {\n    content: \"\"; width: 28px; height: 2px; background: var(--yfcs-red);\n  }\n  .yfcs__title {\n    font-family: var(--yfcs-sans);\n    font-weight: 900;\n    font-size: clamp(44px, 7.5vw, 96px);\n    line-height: 0.96;\n    letter-spacing: -0.035em;\n    margin: 0 0 18px;\n    color: var(--yfcs-ink);\n  }\n  .yfcs__title em {\n    font-family: var(--yfcs-serif);\n    font-style: italic;\n    font-weight: 400;\n    color: var(--yfcs-red);\n    letter-spacing: -0.02em;\n  }\n  .yfcs__lede {\n    font-family: var(--yfcs-serif);\n    font-size: clamp(17px, 1.55vw, 21px);\n    line-height: 1.55;\n    color: var(--yfcs-ink-2);\n    max-width: 60ch;\n    margin: 0 0 28px;\n  }\n  .yfcs__lede strong { color: var(--yfcs-ink); font-weight: 600; font-family: var(--yfcs-sans); }\n\n  .yfcs__stats {\n    display: flex; flex-wrap: wrap; gap: 28px;\n    padding: 18px 0 0;\n    border-top: 1px solid var(--yfcs-hairline);\n    font-size: 13px;\n    color: var(--yfcs-ink-3);\n  }\n  .yfcs__stats b {\n    display: block;\n    font-family: var(--yfcs-sans);\n    font-size: 22px;\n    font-weight: 800;\n    color: var(--yfcs-ink);\n    line-height: 1;\n    margin-bottom: 4px;\n    letter-spacing: -0.01em;\n  }\n\n  \/* ---- Two-column layout: rail + stories ---- *\/\n  .yfcs__layout {\n    display: grid;\n    grid-template-columns: 240px 1fr;\n    gap: clamp(32px, 5vw, 80px);\n    margin-top: clamp(40px, 6vw, 72px);\n    align-items: start;\n  }\n\n  \/* ---- Sticky index rail ---- *\/\n  .yfcs__rail {\n    position: sticky;\n    top: var(--yfcs-sticky-top);\n    align-self: start;\n    max-height: calc(100vh - var(--yfcs-sticky-top) - 24px);\n    overflow: auto;\n    padding-right: 8px;\n  }\n  .yfcs__rail-label {\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    color: var(--yfcs-ink-3);\n    margin: 0 0 16px;\n    padding-bottom: 12px;\n    border-bottom: 1px solid var(--yfcs-hairline);\n  }\n  .yfcs__rail-list {\n    list-style: none;\n    padding: 0; margin: 0;\n    display: flex; flex-direction: column;\n  }\n  .yfcs__rail-link {\n    display: grid;\n    grid-template-columns: 28px 1fr auto;\n    align-items: baseline;\n    gap: 10px;\n    padding: 12px 12px 12px 14px;\n    color: var(--yfcs-ink-2);\n    text-decoration: none;\n    border-left: 2px solid transparent;\n    transition: border-color .18s ease, background-color .18s ease, color .18s ease;\n    cursor: pointer;\n  }\n  .yfcs__rail-link:hover {\n    background: var(--yfcs-paper-2);\n    color: var(--yfcs-ink);\n  }\n  .yfcs__rail-link.is-active {\n    border-left-color: var(--yfcs-red);\n    background: var(--yfcs-red-pale);\n    color: var(--yfcs-ink);\n  }\n  .yfcs__rail-link .n {\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--yfcs-red);\n    letter-spacing: 0.04em;\n    font-variant-numeric: tabular-nums;\n  }\n  .yfcs__rail-link .name {\n    font-size: 17px;\n    font-weight: 600;\n    letter-spacing: -0.01em;\n  }\n  .yfcs__rail-link.is-active .name { font-weight: 700; }\n  .yfcs__rail-link .len {\n    font-size: 11px;\n    color: var(--yfcs-ink-3);\n    font-weight: 500;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .yfcs__rail-card {\n    margin-top: 28px;\n    padding: 20px;\n    background: var(--yfcs-ink);\n    color: #f5f3ec;\n    border-radius: 2px;\n  }\n  .yfcs__rail-card h4 {\n    margin: 0 0 6px;\n    font-size: 16px;\n    font-weight: 700;\n    color: #fff;\n    letter-spacing: -0.01em;\n  }\n  .yfcs__rail-card p {\n    margin: 0 0 14px;\n    font-size: 13px;\n    line-height: 1.5;\n    color: #c8c4b8;\n  }\n  .yfcs__rail-card a {\n    display: inline-flex; align-items: center; gap: 6px;\n    color: #fff;\n    text-decoration: none;\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    padding-bottom: 3px;\n    border-bottom: 1.5px solid var(--yfcs-red);\n  }\n  .yfcs__rail-card a:hover { color: var(--yfcs-red); }\n\n  \/* ---- Story column ---- *\/\n  .yfcs__stories {\n    display: flex;\n    flex-direction: column;\n    gap: clamp(56px, 7vw, 96px);\n    min-width: 0;\n  }\n  .yfcs__story {\n    scroll-margin-top: var(--yfcs-jump-offset);\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);\n    gap: clamp(24px, 3.5vw, 52px);\n    align-items: center;\n  }\n  .yfcs__story.is-flipped .yfcs__copy { order: 2; }\n  .yfcs__story.is-flipped .yfcs__media { order: 1; }\n\n  .yfcs__copy {\n    min-width: 0;\n  }\n  .yfcs__story-tag {\n    display: inline-flex; align-items: center; gap: 10px;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.22em;\n    text-transform: uppercase;\n    color: var(--yfcs-ink-3);\n    margin-bottom: 14px;\n  }\n  .yfcs__story-tag .bar {\n    width: 22px; height: 2px; background: var(--yfcs-red);\n  }\n  .yfcs__story-tag .heavy {\n    margin-left: 4px;\n    padding: 2px 8px 1px;\n    color: var(--yfcs-red);\n    background: var(--yfcs-red-pale);\n    letter-spacing: 0.14em;\n    border-radius: 2px;\n    font-size: 10px;\n  }\n  .yfcs__name {\n    font-size: clamp(44px, 6vw, 76px);\n    line-height: 0.96;\n    font-weight: 900;\n    letter-spacing: -0.035em;\n    margin: 0 0 18px;\n    color: var(--yfcs-ink);\n  }\n  .yfcs__name .dot { color: var(--yfcs-red); }\n  .yfcs__copy p {\n    font-size: clamp(15.5px, 1.15vw, 17px);\n    line-height: 1.65;\n    color: var(--yfcs-ink-2);\n    margin: 0 0 14px;\n    max-width: 54ch;\n  }\n  .yfcs__copy p:last-of-type { margin-bottom: 0; }\n  .yfcs__meta {\n    margin-top: 18px;\n    display: flex; flex-wrap: wrap; gap: 18px;\n    font-size: 12.5px;\n    color: var(--yfcs-ink-3);\n    letter-spacing: 0.04em;\n    align-items: center;\n  }\n  .yfcs__meta .sep { width: 4px; height: 4px; background: var(--yfcs-ink-4); border-radius: 50%; }\n\n  \/* ---- Thumbnail ---- *\/\n  .yfcs__thumbs { display: grid; gap: 14px; }\n  .yfcs__thumbs.is-two { grid-template-columns: 1fr 1fr; }\n  .yfcs__thumb {\n    position: relative;\n    aspect-ratio: 16 \/ 9;\n    background: var(--yfcs-paper-2);\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    overflow: hidden;\n    display: block;\n    border-radius: 2px;\n    transition: transform .25s ease, box-shadow .25s ease;\n    box-shadow: 0 10px 28px -16px rgba(20,20,15,0.45);\n    font-family: inherit;\n    color: inherit;\n    width: 100%;\n  }\n  .yfcs__thumb:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -16px rgba(20,20,15,0.55); }\n  .yfcs__thumb img {\n    width: 100%; height: 100%; object-fit: cover;\n    display: block;\n    transition: transform .6s ease;\n  }\n  .yfcs__thumb:hover img { transform: scale(1.04); }\n  .yfcs__thumb::after {\n    content: \"\";\n    position: absolute; inset: 0;\n    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);\n    pointer-events: none;\n  }\n  .yfcs__play {\n    position: absolute;\n    top: 50%; left: 50%;\n    transform: translate(-50%, -50%);\n    width: 78px; height: 78px;\n    border-radius: 50%;\n    background: var(--yfcs-red);\n    display: grid; place-items: center;\n    box-shadow: 0 8px 24px rgba(227, 24, 55, 0.45), 0 0 0 0 rgba(227, 24, 55, 0.4);\n    transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease;\n    z-index: 2;\n  }\n  .yfcs__thumb:hover .yfcs__play {\n    transform: translate(-50%, -50%) scale(1.08);\n    background: var(--yfcs-red-dark);\n  }\n  .yfcs__play::after {\n    content: \"\";\n    width: 0; height: 0;\n    border-left: 22px solid #fff;\n    border-top: 14px solid transparent;\n    border-bottom: 14px solid transparent;\n    margin-left: 6px;\n    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));\n  }\n  .yfcs__thumbs.is-two .yfcs__play { width: 60px; height: 60px; }\n  .yfcs__thumbs.is-two .yfcs__play::after {\n    border-left-width: 17px; border-top-width: 11px; border-bottom-width: 11px; margin-left: 5px;\n  }\n  .yfcs__thumb-label {\n    position: absolute;\n    left: 14px; bottom: 12px;\n    z-index: 2;\n    color: #fff;\n    font-size: 12px;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    text-shadow: 0 1px 4px rgba(0,0,0,0.5);\n  }\n\n  \/* Coming-soon variant for stories without a video yet *\/\n  .yfcs__thumb.is-coming {\n    cursor: default;\n    background:\n      radial-gradient(circle at 30% 30%, rgba(227,24,55,0.18), transparent 45%),\n      linear-gradient(135deg, #f0ece0 0%, #d8d2c4 100%);\n  }\n  .yfcs__thumb.is-coming::after { display: none; }\n  .yfcs__thumb.is-coming:hover { transform: none; box-shadow: 0 10px 28px -16px rgba(20,20,15,0.45); }\n  .yfcs__thumb.is-coming .yfcs__play {\n    background: var(--yfcs-paper);\n    box-shadow: 0 8px 24px rgba(0,0,0,0.18);\n  }\n  .yfcs__thumb.is-coming .yfcs__play::after { border-left-color: var(--yfcs-red); }\n  .yfcs__coming-text {\n    position: absolute;\n    bottom: 18px; left: 18px;\n    color: var(--yfcs-ink);\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    z-index: 2;\n  }\n  .yfcs__coming-text small {\n    display: block;\n    font-family: var(--yfcs-serif);\n    font-style: italic;\n    font-weight: 400;\n    font-size: 13px;\n    color: var(--yfcs-ink-3);\n    letter-spacing: 0;\n    text-transform: none;\n    margin-top: 4px;\n  }\n\n  \/* ---- Closer ---- *\/\n  .yfcs__closer {\n    margin-top: clamp(72px, 9vw, 120px);\n    margin-left: calc(-1 * clamp(16px, 4vw, 40px));\n    margin-right: calc(-1 * clamp(16px, 4vw, 40px));\n    padding: clamp(28px, 4vw, 48px) clamp(16px, 4vw, 40px);\n    background: var(--yfcs-red);\n    color: #ffe6ea;\n    border-radius: 0;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 28px;\n    align-items: center;\n  }\n  .yfcs__closer > div { max-width: 1240px; }\n  .yfcs__closer h3 {\n    margin: 0 0 8px;\n    font-size: clamp(24px, 3vw, 36px);\n    font-weight: 800;\n    line-height: 1.05;\n    color: #fff;\n    letter-spacing: -0.02em;\n  }\n  .yfcs__closer h3 em {\n    font-family: var(--yfcs-serif);\n    font-style: italic;\n    font-weight: 400;\n    color: #ffd0d6;\n  }\n  .yfcs__closer p {\n    margin: 0;\n    color: #ffd8dd;\n    font-size: 15px;\n    line-height: 1.55;\n    max-width: 52ch;\n  }\n  .yfcs__closer-cta {\n    display: inline-flex;\n    align-items: center; gap: 10px;\n    padding: 16px 26px;\n    background: #fff;\n    color: var(--yfcs-red);\n    text-decoration: none;\n    font-weight: 700;\n    font-size: 14px;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    border-radius: 2px;\n    transition: background-color .18s ease, transform .18s ease;\n    border: 0;\n    cursor: pointer;\n    white-space: nowrap;\n    font-family: inherit;\n  }\n  .yfcs__closer-cta:hover { background: var(--yfcs-ink); transform: translateY(-2px); color: #fff; }\n  .yfcs__closer-cta svg { width: 16px; height: 16px; }\n  .yfcs__closer .yfcs__eyebrow { color: #fff; }\n  .yfcs__closer .yfcs__eyebrow::before { background: #fff; }\n\n  \/* ---- Modal ---- *\/\n  .yfcs__modal {\n    position: fixed; inset: 0;\n    background: rgba(10, 10, 8, 0.88);\n    backdrop-filter: blur(6px);\n    -webkit-backdrop-filter: blur(6px);\n    z-index: 99999;\n    display: none;\n    align-items: center; justify-content: center;\n    padding: clamp(16px, 4vw, 48px);\n    animation: yfcs-fade .25s ease both;\n  }\n  .yfcs__modal.is-open { display: flex; }\n  @keyframes yfcs-fade { from { opacity: 0; } to { opacity: 1; } }\n  .yfcs__modal-inner {\n    position: relative;\n    width: 100%;\n    max-width: 1120px;\n    aspect-ratio: 16 \/ 9;\n    background: #000;\n    border-radius: 2px;\n    overflow: hidden;\n    box-shadow: 0 30px 80px rgba(0,0,0,0.6);\n    animation: yfcs-rise .35s cubic-bezier(.2,.8,.25,1) both;\n  }\n  @keyframes yfcs-rise { from { transform: translateY(16px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }\n  .yfcs__modal iframe {\n    width: 100%; height: 100%;\n    border: 0;\n    display: block;\n  }\n  .yfcs__modal-close {\n    position: absolute;\n    top: -44px; right: 0;\n    background: transparent;\n    border: 0;\n    color: #fff;\n    width: 36px; height: 36px;\n    display: grid; place-items: center;\n    cursor: pointer;\n    font-family: inherit;\n    transition: transform .15s ease;\n  }\n  .yfcs__modal-close:hover { transform: rotate(90deg); }\n  .yfcs__modal-close::before, .yfcs__modal-close::after {\n    content: \"\"; position: absolute;\n    width: 24px; height: 2px; background: #fff;\n  }\n  .yfcs__modal-close::before { transform: rotate(45deg); }\n  .yfcs__modal-close::after  { transform: rotate(-45deg); }\n  .yfcs__modal-caption {\n    position: absolute;\n    bottom: -36px; left: 0;\n    color: #c8c4b8;\n    font-size: 13px;\n    letter-spacing: 0.04em;\n  }\n  body.yfcs-lock { overflow: hidden; }\n\n  \/* ---- Responsive ---- *\/\n  @media (max-width: 900px) {\n    .yfcs__layout {\n      grid-template-columns: minmax(0, 1fr);\n      gap: 24px;\n    }\n    .yfcs__rail {\n      display: none !important;\n    }\n    .yfcs__rail-label { display: none; }\n    .yfcs__rail-list {\n      flex-direction: row;\n      gap: 8px;\n      overflow-x: auto;\n      padding-bottom: 4px;\n      scrollbar-width: thin;\n    }\n    .yfcs__rail-link {\n      flex: 0 0 auto;\n      grid-template-columns: auto auto;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 14px;\n      border-left: 0;\n      border-bottom: 0;\n      border-radius: 999px;\n      background: var(--yfcs-paper-2);\n      white-space: nowrap;\n    }\n    .yfcs__rail-link.is-active {\n      border-left: 0;\n      background: var(--yfcs-paper-2);\n      color: var(--yfcs-ink);\n    }\n    .yfcs__rail-link.is-active .n { color: var(--yfcs-red); }\n    .yfcs__rail-link .len { display: none; }\n    .yfcs__rail-link .name { font-size: 14px; font-weight: 600; }\n    .yfcs__rail-card { display: none; }\n\n    .yfcs__story, .yfcs__story.is-flipped {\n      grid-template-columns: minmax(0, 1fr);\n      gap: 24px;\n    }\n    .yfcs__copy, .yfcs__media { min-width: 0; }\n    .yfcs__copy p { max-width: none; }\n    .yfcs__story.is-flipped .yfcs__copy { order: 1; }\n    .yfcs__story.is-flipped .yfcs__media { order: 2; }\n\n    .yfcs__closer {\n      grid-template-columns: 1fr;\n      text-align: left;\n    }\n  }\n  @media (max-width: 520px) {\n    .yfcs__thumbs.is-two { grid-template-columns: 1fr; }\n    .yfcs__play { width: 64px; height: 64px; }\n    .yfcs__play::after { border-left-width: 18px; border-top-width: 12px; border-bottom-width: 12px; }\n  }\n<\/style>\n\n<section class=\"yfcs\" aria-labelledby=\"yfcs-title\">\n  <div class=\"yfcs__wrap\">\n\n    <!-- INTRO -->\n    <header>\n      <h1 class=\"yfcs__title\" id=\"yfcs-title\">Youth <em>stories.<\/em><\/h1>\n      <p class=\"yfcs__lede\">\n        Six young people from our community sharing what they&#8217;ve lived \u2014 in their own words. <strong>Honest, hard, and hopeful.<\/strong>\n        Pick a name to skip ahead, or scroll through one at a time.\n      <\/p>\n    <\/header>\n\n    <!-- LAYOUT -->\n    <div class=\"yfcs__layout\">\n\n      <!-- RAIL -->\n      <aside class=\"yfcs__rail\" aria-label=\"Story index\">\n        <div class=\"yfcs__rail-label\">The stories<\/div>\n        <ul class=\"yfcs__rail-list\">\n          <li><a class=\"yfcs__rail-link is-active\" href=\"#riley\" data-jump=\"riley\"><span class=\"n\">01<\/span><span class=\"name\">Riley<\/span><span class=\"len\">Video<\/span><\/a><\/li>\n          <li><a class=\"yfcs__rail-link\" href=\"#alexa\" data-jump=\"alexa\"><span class=\"n\">02<\/span><span class=\"name\">Alexa<\/span><span class=\"len\">Video<\/span><\/a><\/li>\n          <li><a class=\"yfcs__rail-link\" href=\"#mikayla\" data-jump=\"mikayla\"><span class=\"n\">03<\/span><span class=\"name\">Mikayla<\/span><span class=\"len\">Video<\/span><\/a><\/li>\n          <li><a class=\"yfcs__rail-link\" href=\"#finn\" data-jump=\"finn\"><span class=\"n\">04<\/span><span class=\"name\">Finn<\/span><span class=\"len\">Video<\/span><\/a><\/li>\n          <li><a class=\"yfcs__rail-link\" href=\"#jorden\" data-jump=\"jorden\"><span class=\"n\">05<\/span><span class=\"name\">Jorden<\/span><span class=\"len\">Video<\/span><\/a><\/li>\n          <li><a class=\"yfcs__rail-link\" href=\"#emily\" data-jump=\"emily\"><span class=\"n\">06<\/span><span class=\"name\">Emily<\/span><span class=\"len\">Video<\/span><\/a><\/li>\n        <\/ul>\n        <div class=\"yfcs__rail-card\">\n          <h4>Got a story of your own?<\/h4>\n          <p>Our drop-in centres in Steinbach and Blumenort are open to any young person. Come hang out.<\/p>\n          <a href=\"https:\/\/yfc.ca\/steinbach\/our-programs\/\">Visit our drop-ins \u2192<\/a>\n        <\/div>\n      <\/aside>\n\n      <!-- STORIES -->\n      <div class=\"yfcs__stories\">\n\n        <!-- 01 \u2014 Riley (two videos) -->\n        <article class=\"yfcs__story\" id=\"riley\">\n          <div class=\"yfcs__copy\">\n            <div class=\"yfcs__story-tag\"><span class=\"bar\"><\/span> Story 01 \u2014 Riley<\/div>\n            <h2 class=\"yfcs__name\">Riley<span class=\"dot\">.<\/span><\/h2>\n            <p>Riley&#8217;s interest in photography and video has developed over the years. He wanted to grow as a film-maker, so he spent time with <a href=\"https:\/\/yfc.ca\/steinbach\/team\/allen-penner\/\" style=\"color: var(--yfcs-ink); text-decoration: underline; text-decoration-color: var(--yfcs-red); text-underline-offset: 3px;\">Allen<\/a>, one of our youth workers, crafting his story, planning the visuals, and sharing his testimony in a cinematic way.<\/p>\n            <p>It&#8217;s been awesome to watch Riley&#8217;s relationship with Jesus deepen \u2014 and we&#8217;re excited to share his story with you.<\/p>\n            <div class=\"yfcs__meta\">\n              <span>Filmed with Allen Penner<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"yfcs__media\">\n            <div class=\"yfcs__thumbs\">\n              <button class=\"yfcs__thumb\" data-video=\"brWnT16Y3wM\" data-title=\"Riley's story\">\n                <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/brWnT16Y3wM\/hqdefault.jpg\" alt=\"Riley's story thumbnail\" loading=\"lazy\" \/>\n                <span class=\"yfcs__play\" aria-hidden=\"true\"><\/span>\n                <span class=\"yfcs__thumb-label\">Watch Riley&#8217;s story<\/span>\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <!-- 02 \u2014 Alexa (flipped) -->\n        <article class=\"yfcs__story is-flipped\" id=\"alexa\">\n          <div class=\"yfcs__copy\">\n            <div class=\"yfcs__story-tag\"><span class=\"bar\"><\/span> Story 02 \u2014 Alexa<\/div>\n            <h2 class=\"yfcs__name\">Alexa<span class=\"dot\">.<\/span><\/h2>\n            <p>Alexa grew up around church, but for a long time faith felt more like rules than a real relationship with God. As she got older, she found herself surrounded by unhealthy influences and heavy drinking, and life began to spiral.<\/p>\n            <p>Through the Backstage drop-in centre, Alexa encountered people who genuinely cared about her and helped her see faith in a new way. She shares her story of rediscovering hope \u2014 and learning she was never walking alone.<\/p>\n            <div class=\"yfcs__meta\">\n              <span>Backstage drop-in<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"yfcs__media\">\n            <div class=\"yfcs__thumbs\">\n              <button class=\"yfcs__thumb\" data-video=\"jLVujDgpUr4\" data-title=\"Alexa's story\">\n                <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/jLVujDgpUr4\/hqdefault.jpg\" alt=\"Alexa's story thumbnail\" loading=\"lazy\" \/>\n                <span class=\"yfcs__play\" aria-hidden=\"true\"><\/span>\n                <span class=\"yfcs__thumb-label\">Watch Alexa&#8217;s story<\/span>\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <!-- 03 \u2014 Mikayla -->\n        <article class=\"yfcs__story\" id=\"mikayla\">\n          <div class=\"yfcs__copy\">\n            <div class=\"yfcs__story-tag\"><span class=\"bar\"><\/span> Story 03 \u2014 Mikayla<\/div>\n            <h2 class=\"yfcs__name\">Mikayla<span class=\"dot\">.<\/span><\/h2>\n            <p>Mikayla&#8217;s path back to feeling accepted by Jesus was filled with other people along the way showing her she was loved in every moment, just as she was. She shares her story of finding her way back to church, and finding that belonging we&#8217;re all searching for.<\/p>\n            <p>We&#8217;ve loved getting to see how her life was fully transformed.<\/p>\n            <div class=\"yfcs__meta\">\n              <span>Belonging \u00b7 Transformation<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"yfcs__media\">\n            <div class=\"yfcs__thumbs\">\n              <button class=\"yfcs__thumb\" data-video=\"Y357BHwd5yI\" data-title=\"Mikayla's story\">\n                <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/Y357BHwd5yI\/hqdefault.jpg\" alt=\"Mikayla's story thumbnail\" loading=\"lazy\" \/>\n                <span class=\"yfcs__play\" aria-hidden=\"true\"><\/span>\n                <span class=\"yfcs__thumb-label\">Watch Mikayla&#8217;s story<\/span>\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <!-- 04 \u2014 Finn (flipped) -->\n        <article class=\"yfcs__story is-flipped\" id=\"finn\">\n          <div class=\"yfcs__copy\">\n            <div class=\"yfcs__story-tag\"><span class=\"bar\"><\/span> Story 04 \u2014 Finn <span class=\"heavy\">Heavy themes<\/span><\/div>\n            <h2 class=\"yfcs__name\">Finn<span class=\"dot\">.<\/span><\/h2>\n            <p>Finn&#8217;s story is a hard one to hear. But it&#8217;s so important to hear stories like this \u2014 they show us the real things that are unfortunately common in our community.<\/p>\n            <p>We hear a lot of stories like this. It&#8217;s part of why we do what we do.<\/p>\n            <div class=\"yfcs__meta\">\n              <span>Listener discretion advised<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"yfcs__media\">\n            <div class=\"yfcs__thumbs\">\n              <button class=\"yfcs__thumb\" data-video=\"v9L0k2I_naU\" data-title=\"Finn's story\">\n                <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/v9L0k2I_naU\/hqdefault.jpg\" alt=\"Finn's story thumbnail\" loading=\"lazy\" \/>\n                <span class=\"yfcs__play\" aria-hidden=\"true\"><\/span>\n                <span class=\"yfcs__thumb-label\">Watch Finn&#8217;s story<\/span>\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <!-- 05 \u2014 Jorden -->\n        <article class=\"yfcs__story\" id=\"jorden\">\n          <div class=\"yfcs__copy\">\n            <div class=\"yfcs__story-tag\"><span class=\"bar\"><\/span> Story 05 \u2014 Jorden<\/div>\n            <h2 class=\"yfcs__name\">Jorden<span class=\"dot\">.<\/span><\/h2>\n            <p>Jorden has been involved with YFC Steinbach for several years. His story is wild. He was willing to share some of it with us \u2014 and we were more than happy to listen.<\/p>\n            <div class=\"yfcs__meta\">\n              <span>Long-time YFC<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"yfcs__media\">\n            <div class=\"yfcs__thumbs\">\n              <button class=\"yfcs__thumb\" data-video=\"I89JyEp-mBs\" data-title=\"Jorden's story\">\n                <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/I89JyEp-mBs\/hqdefault.jpg\" alt=\"Jorden's story thumbnail\" loading=\"lazy\" \/>\n                <span class=\"yfcs__play\" aria-hidden=\"true\"><\/span>\n                <span class=\"yfcs__thumb-label\">Watch Jorden&#8217;s story<\/span>\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/article>\n\n        <!-- 06 \u2014 Emily (flipped, no video yet) -->\n        <article class=\"yfcs__story is-flipped\" id=\"emily\">\n          <div class=\"yfcs__copy\">\n            <div class=\"yfcs__story-tag\"><span class=\"bar\"><\/span> Story 06 \u2014 Emily <span class=\"heavy\">Heavy themes<\/span><\/div>\n            <h2 class=\"yfcs__name\">Emily<span class=\"dot\">.<\/span><\/h2>\n            <p>Emily&#8217;s journey of homelessness, foster care, exploitation and addiction led her to meeting Jesus. She has a heart for helping people and hopes that her story helps others see the hope and potential in themselves.<\/p>\n            <div class=\"yfcs__meta\">\n              <span>Listener discretion advised<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"yfcs__media\">\n            <div class=\"yfcs__thumbs\">\n              <button class=\"yfcs__thumb\" data-video=\"964SMit2dT4\" data-title=\"Emily's story\">\n                <img decoding=\"async\" src=\"https:\/\/i.ytimg.com\/vi\/964SMit2dT4\/hqdefault.jpg\" alt=\"Emily's story thumbnail\" loading=\"lazy\" \/>\n                <span class=\"yfcs__play\" aria-hidden=\"true\"><\/span>\n                <span class=\"yfcs__thumb-label\">Watch Emily&#8217;s story<\/span>\n              <\/button>\n            <\/div>\n          <\/div>\n        <\/article>\n\n      <\/div>\n    <\/div>\n\n    <!-- CLOSER -->\n    <aside class=\"yfcs__closer\" aria-labelledby=\"yfcs-closer\">\n      <div>\n        <div class=\"yfcs__eyebrow\" style=\"color:#fff;\">Get Involved<\/div>\n        <h3 id=\"yfcs-closer\">These stories need <em style=\"color: rgb(0, 0, 0)\">you<\/em> in them.<\/h3>\n        <p>Youth in our community are looking for people who will show up consistently and care. You don&#8217;t need a degree. You just need to be that person.<\/p>\n      <\/div>\n      <a class=\"yfcs__closer-cta\" href=\"https:\/\/yfc.ca\/steinbach\/volunteer\/\">Explore Volunteering<\/a>\n    <\/aside>\n\n  <\/div>\n\n  <!-- MODAL -->\n  <div class=\"yfcs__modal\" id=\"yfcs-modal\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Video player\">\n    <div class=\"yfcs__modal-inner\">\n      <button class=\"yfcs__modal-close\" id=\"yfcs-modal-close\" aria-label=\"Close video\"><\/button>\n      <iframe id=\"yfcs-modal-iframe\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n      <div class=\"yfcs__modal-caption\" id=\"yfcs-modal-caption\"><\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function () {\n  var root = document.querySelector('.yfcs');\n  if (!root || root.__yfcsInit) return;\n  root.__yfcsInit = true;\n\n  \/\/ ---- Modal logic ----\n  var modal     = root.querySelector('#yfcs-modal');\n  var iframe    = root.querySelector('#yfcs-modal-iframe');\n  var caption   = root.querySelector('#yfcs-modal-caption');\n  var closeBtn  = root.querySelector('#yfcs-modal-close');\n\n  function openVideo(id, title, start) {\n    if (!id) return;\n    var qs = 'autoplay=1&rel=0&modestbranding=1';\n    if (start) qs += '&start=' + parseInt(start, 10);\n    iframe.src = 'https:\/\/www.youtube.com\/embed\/' + id + '?' + qs;\n    caption.textContent = title || '';\n    modal.classList.add('is-open');\n    document.body.classList.add('yfcs-lock');\n  }\n  function closeVideo() {\n    modal.classList.remove('is-open');\n    iframe.src = '';\n    document.body.classList.remove('yfcs-lock');\n  }\n\n  root.querySelectorAll('.yfcs__thumb').forEach(function (btn) {\n    if (btn.classList.contains('is-coming')) return;\n    btn.addEventListener('click', function () {\n      openVideo(btn.dataset.video, btn.dataset.title, btn.dataset.start);\n    });\n  });\n  closeBtn.addEventListener('click', closeVideo);\n  modal.addEventListener('click', function (e) { if (e.target === modal) closeVideo(); });\n  document.addEventListener('keydown', function (e) {\n    if (e.key === 'Escape' && modal.classList.contains('is-open')) closeVideo();\n  });\n\n  \/\/ ---- Smooth scroll for rail jumps (avoids relying on scroll-behavior) ----\n  var jumpOffsetVar = parseInt(getComputedStyle(root).getPropertyValue('--yfcs-jump-offset'), 10) || 80;\n  root.querySelectorAll('.yfcs__rail-link').forEach(function (a) {\n    a.addEventListener('click', function (e) {\n      var id = a.getAttribute('data-jump');\n      var target = root.querySelector('#' + id);\n      if (!target) return;\n      e.preventDefault();\n      var top = target.getBoundingClientRect().top + window.pageYOffset - jumpOffsetVar;\n      window.scrollTo({ top: top, behavior: 'smooth' });\n      history.replaceState(null, '', '#' + id);\n    });\n  });\n\n  \/\/ ---- Active rail item via IntersectionObserver ----\n  var stories = root.querySelectorAll('.yfcs__story');\n  var links   = root.querySelectorAll('.yfcs__rail-link');\n  var linkById = {};\n  links.forEach(function (a) { linkById[a.getAttribute('data-jump')] = a; });\n\n  function setActive(id) {\n    links.forEach(function (a) { a.classList.remove('is-active'); });\n    if (linkById[id]) linkById[id].classList.add('is-active');\n  }\n\n  if ('IntersectionObserver' in window) {\n    var current = stories[0] ? stories[0].id : null;\n    var ratios = {};\n    var io = new IntersectionObserver(function (entries) {\n      entries.forEach(function (e) { ratios[e.target.id] = e.intersectionRatio; });\n      var best = null, bestR = 0;\n      Object.keys(ratios).forEach(function (k) {\n        if (ratios[k] > bestR) { bestR = ratios[k]; best = k; }\n      });\n      if (best && best !== current) { current = best; setActive(current); }\n    }, { rootMargin: '-30% 0px -50% 0px', threshold: [0, 0.2, 0.4, 0.6, 0.8, 1] });\n    stories.forEach(function (s) { io.observe(s); });\n  }\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Youth stories. Six young people from our community sharing what they&#8217;ve lived \u2014 in their own words. Honest, hard, and hopeful. Pick a name to skip ahead, or scroll through one at a time. The stories 01RileyVideo 02AlexaVideo 03MikaylaVideo 04FinnVideo 05JordenVideo 06EmilyVideo Got a story of your own? Our drop-in centres in Steinbach and Blumenort &hellip; <a href=\"https:\/\/yfc.ca\/steinbach\/youth-stories\/\">Continued<\/a><\/p>\n","protected":false},"author":17,"featured_media":2640,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2682","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/pages\/2682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/comments?post=2682"}],"version-history":[{"count":12,"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/pages\/2682\/revisions"}],"predecessor-version":[{"id":2760,"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/pages\/2682\/revisions\/2760"}],"wp:attachment":[{"href":"https:\/\/yfc.ca\/steinbach\/wp-json\/wp\/v2\/media?parent=2682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}