/* thesamanthawarren.com · about page story path */
.path-intro { text-align: center; max-width: 1000px; margin: 0 auto; }
.path-intro .lead { margin: 1.25rem auto 0; max-width: 40em; }
.path-intro .lead .it { font-size: 1.2em; color: var(--ink); }
.path { --pad: 2.5rem; --lab: 3.25rem; --ly: calc(var(--lab) + 1.375rem); --in: calc(100% - 2 * var(--pad)); margin-top: 4rem; }
.act { position: relative; padding: 0 var(--pad) 3.5rem; }
.act-label { height: var(--lab); text-align: center; font-family: var(--voice); font-style: italic; font-size: 1.6rem; line-height: 1.1; }
.a3 .act-label { color: var(--body); }
.act ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; z-index: 1; }
.a2 ol { direction: rtl; }
.a3 ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.act li { direction: ltr; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: 0 1.1rem; }
.act h3 { font-size: 1.55rem; line-height: 1.05; }
.act p { color: var(--body); font-size: 1rem; line-height: 1.5; }
.pstar { width: 2.75rem; height: 2.75rem; margin-bottom: .55rem; flex: none; overflow: visible; }
.pstar polygon { stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.pstar.o polygon { fill: var(--bg); }
.pstar.s polygon { fill: var(--ink); }
.pstar.g polygon { fill: var(--green); stroke-width: 1.5; }
.pstar.l polygon { fill: var(--lime); stroke-width: .9; }
.act li.now .pstar { width: 8.5rem; height: 8.5rem; margin: -2.875rem 0 0; }
.act li.now h3 { font-size: 1.85rem; }
.ptag { border: 1.5px solid var(--ink); border-radius: 999px; padding: .15rem .85rem; font-size: .85rem; font-weight: 500; }
.ptag.fill { background: var(--green); border-color: var(--green); }
.ptag.now { background: var(--ink); color: var(--lime); font-weight: 600; }
/* the line: one path that gets bolder as the voice does */
.act::before, .act::after { content: ""; position: absolute; top: var(--ly); pointer-events: none; }
.a1::before { left: calc(var(--pad) + var(--in) / 6); right: calc(var(--pad) + var(--in) / 6); border-top: 3.5px dotted var(--ink); margin-top: -1.75px; }
.a1::after { right: 0; width: calc(var(--pad) + var(--in) / 6); height: 100%; margin-top: -1.75px;
             border: 3.5px dotted var(--ink); border-left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; }
.a2::before { left: calc(var(--pad) + var(--in) / 8); right: calc(var(--pad) + var(--in) / 6); border-top: 3.5px dashed var(--ink); margin-top: -1.75px; }
.a2::after { left: 0; width: calc(var(--pad) + var(--in) / 8); height: 100%; margin-top: -1.75px;
             border: 3.5px dashed var(--ink); border-right: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; }
.a3::before { left: calc(var(--pad) + var(--in) / 8); right: calc(var(--pad) + var(--in) / 8); border-top: 9px solid var(--green); margin-top: -4.5px; border-radius: 9px; }
.a3::after { display: none; }
.a3 { padding-bottom: 0; }

@media (max-width: 900px) {
  .path { margin-top: 2.75rem; }
  .act { padding: 0; }
  .act::before, .act::after { display: none; }
  .act-label { height: auto; text-align: left; font-size: 1.4rem; margin: 0 0 1.1rem 3.4rem; }
  .act ol, .a3 ol { direction: ltr; grid-template-columns: 1fr; gap: 2rem; margin-left: .9rem; padding: .25rem 0 2rem 1.9rem; }
  .a1 ol { border-left: 3px dotted var(--ink); }
  .a2 ol { border-left: 3px dashed var(--ink); }
  .a3 ol { border-left: 7px solid var(--green); margin-left: .75rem; padding-bottom: 0; }
  .act li { position: relative; align-items: flex-start; text-align: left; padding: 0; }
  .pstar { position: absolute; left: -2.95rem; top: 0; width: 1.9rem; height: 1.9rem; margin: 0; }
  .a3 .pstar { width: 2.1rem; height: 2.1rem; left: -3.2rem; top: -.1rem; }
  .act h3 { font-size: 1.45rem; }
  .act li.now { padding: 1.5rem 0 .5rem 3.5rem; }
  .act li.now .pstar { width: 5.5rem; height: 5.5rem; left: -5rem; top: .6rem; margin: 0; }
  .act li.now h3 { font-size: 1.7rem; }
  .act li.now::before { content: ""; position: absolute; left: calc(-1.9rem - 9px); top: 3.6rem; bottom: 0; width: 11px; background: var(--bg); }
}