/* MySBDC case study. Sits on style.css, home-v2.css, and sbdc-ai.css.
   One idea per section: the problem, eighteen becoming one, the journey
   as a line, three moves, one number. */

.my-page .case-lede{font-size:22px;max-width:30ch}

/* film: one walkthrough */
.my-film{padding-bottom:64px}

/* the problem: one heading, one paragraph, lots of air */
.my-problem{border-top:1px solid var(--line);padding-top:110px;padding-bottom:120px;max-width:1360px}
.my-problem .label{margin-bottom:36px}
.my-page .my-problem h2{font-size:clamp(40px,4.8vw,68px);line-height:1.08;max-width:16ch}
.my-problem>p{font-size:20px;line-height:1.6;max-width:40ch;margin-top:40px}

/* eighteen become one, on paper */
.my-collapse{background:var(--paper);color:var(--ink)}
.my-collapse-inner{padding-block:96px 100px}
.collapse-figure{display:flex;align-items:center;gap:clamp(24px,4vw,64px);margin:0 0 72px}
.collapse-many{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;flex:1 1 0;max-width:640px}
.collapse-many i{display:block;aspect-ratio:1;border:1px solid #8f8a80;position:relative}
.collapse-many i::after{content:"";position:absolute;left:18%;top:18%;width:22%;height:22%;background:#8f8a80}
.collapse-arrow{font:300 clamp(40px,5vw,72px)/1 proxima-nova,Arial,sans-serif;color:#8f8a80;flex:0 0 auto}
.collapse-one{margin-left:auto;flex:0 0 clamp(150px,20vw,270px);aspect-ratio:1;background:var(--ink);color:var(--paper);display:flex;align-items:flex-end;padding:8%;font:300 clamp(26px,3vw,44px)/1 proxima-nova,Arial,sans-serif;letter-spacing:-.05em}
.collapse-one b{font-weight:700}
.my-page .my-collapse h2{color:var(--ink);font-size:clamp(38px,4.4vw,62px);line-height:1.08;max-width:none}
.my-collapse h2 em{color:#a44826}
.my-collapse-inner>p{font-size:19px;line-height:1.6;color:#44413d;max-width:44ch;margin-top:32px}

/* the journey as one line */
.my-journey{border-top:1px solid var(--line);padding-top:100px;padding-bottom:110px}
.my-journey-head .label{margin-bottom:36px}
.my-page .my-journey h2{font-size:clamp(38px,4.4vw,62px);line-height:1.08;max-width:16ch;margin-bottom:72px}
.journey-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;position:relative}
.journey-line::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.journey-line li{padding-top:26px;position:relative;font-size:17px;line-height:1.35;color:var(--light);max-width:11ch}
.journey-line li::before{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;background:var(--sand)}
.journey-line li>span{display:block;font:12px/1.6 'Space Mono',monospace;letter-spacing:.06em;color:var(--sand);margin-bottom:10px}
.journey-line li.is-turn::before{background:var(--orange)}
.journey-line li.is-turn>span{color:var(--orange)}
.my-journey-note{font-size:19px;line-height:1.6;max-width:44ch;margin-top:72px}

/* three moves */
.my-moves{border-top:1px solid var(--line);padding-top:84px;padding-bottom:100px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.my-moves h3{font:400 clamp(26px,2.4vw,32px)/1.15 proxima-sera,Georgia,serif;letter-spacing:-.025em;margin-bottom:18px}
.my-moves p{font-size:17px;line-height:1.6;max-width:32ch}

/* the case in numbers */
.my-case{padding-top:64px;padding-bottom:104px}
.my-case .label{margin-bottom:28px}
.my-page .my-case h2{font-size:clamp(40px,4.8vw,68px);line-height:1.08;max-width:19ch;color:var(--sand)}
.my-case h2 em{color:var(--light)}
.my-metrics{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.my-metrics li{padding:44px 24px 40px;border-left:1px solid var(--line)}
.my-metrics li:first-child{padding-left:0;border-left:0}
.my-metric{display:flex;align-items:baseline;gap:.28em;font:600 clamp(36px,3.4vw,52px)/1 proxima-nova,Arial,sans-serif;letter-spacing:-.04em;color:var(--light)}
.my-metric small{font-size:.42em;font-weight:400;letter-spacing:-.01em;color:var(--sand);margin-left:.06em}
.my-metric-to{color:var(--orange);font-size:.66em;font-weight:400;align-self:center;margin-top:-.15em}
.my-metrics li>p:last-child{font-size:15px;line-height:1.5;color:var(--sand);margin-top:20px}

@media(max-width:1000px){
  .my-metrics{grid-template-columns:1fr 1fr}
  .my-metrics li:nth-child(3){border-left:0;padding-left:0}
  .my-metrics li:nth-child(n+3){border-top:1px solid var(--line)}
  .my-moves{gap:32px}
  .journey-line{gap:16px}
}
@media(max-width:720px){
  .my-page .case-lede{font-size:19px}
  .my-film{padding-bottom:48px}
  .my-problem{padding-top:56px;padding-bottom:64px}
  .my-problem .label{margin-bottom:22px}
  .my-problem>p{font-size:18px;margin-top:26px}
  .my-collapse-inner{padding-block:56px 64px}
  .collapse-figure{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:44px}
  .collapse-many{flex:none;width:100%;max-width:100%;gap:8px}
  .collapse-arrow{transform:rotate(90deg);margin-left:8px}
  .collapse-one{margin-left:0;flex:none;width:min(60%,220px)}
  .my-collapse-inner>p{font-size:17px;margin-top:22px}
  .my-journey{padding-top:56px;padding-bottom:64px}
  .my-journey-head .label{margin-bottom:22px}
  .my-page .my-journey h2{margin-bottom:40px}
  .journey-line{grid-template-columns:1fr;gap:0}
  .journey-line::before{top:0;bottom:0;left:4px;right:auto;width:1px;height:auto}
  .journey-line li{padding:0 0 26px 28px;max-width:none;display:flex;align-items:baseline;gap:14px}
  .journey-line li::before{left:0;top:6px}
  .journey-line li>span{margin:0}
  .journey-line li:last-child{padding-bottom:0}
  .my-journey-note{font-size:17px;margin-top:44px}
  .my-moves{grid-template-columns:1fr;gap:36px;padding-top:56px;padding-bottom:64px}
  .my-moves p{max-width:43ch}
  .my-case{padding-top:48px;padding-bottom:64px}
  .my-metrics{grid-template-columns:1fr;margin-top:40px}
  .my-metrics li{padding:24px 0;border-left:0;border-top:1px solid var(--line)}
  .my-metrics li:first-child{border-top:0}
  .my-metrics li>p:last-child{margin-top:12px}
}