/* Round 205: Footsteps in the look of the mock: dark ground, amber for the path, teal for "together", a drawn path behind. Scoped to .fp-*. */
.fp-stage{--fb:#1f1710;--fp:#2a1f15;--fl:#5a4630;--ft:#F8EEDA;--fm:#D6C3A0;--fa:#F2B65C;--fg:#62CDBB;position:relative;margin:10px 0;border-radius:18px;overflow:hidden;color:var(--ft);background:var(--fb) url(/footsteps/oasis.jpg) center bottom/cover no-repeat;padding:0 0 12px;isolation:isolate}
.fp-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(31,23,16,.55) 0%,rgba(31,23,16,.62) 40%,rgba(31,23,16,.42) 100%)}
.fp-hero{padding:12px clamp(14px,3vw,28px) 0}
.fp-kick{margin:0;font:500 12px ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--fm)}
.fp-title{margin:4px 0 8px;font:500 clamp(34px,6vw,56px)/1 Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.fp-main{margin:0;max-width:56ch;font:italic 400 clamp(16px,2.2vw,19px)/1.4 Georgia,serif;color:var(--ft);border-left:3px solid var(--fa);padding-left:12px}
.fp-main cite{display:block;margin-top:4px;font:500 12px ui-monospace,Menlo,monospace;font-style:normal;letter-spacing:.08em;color:var(--fa)}
.fp-lede{margin:0;max-width:62ch;font-size:14px;color:var(--fm)}
.fp-msg{margin:8px clamp(14px,3vw,28px);color:var(--fa)}
.fp-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:16px;padding:10px clamp(14px,3vw,28px) 0}
.fp-side{min-width:0}
.fp-k{display:block;margin:0 0 6px;font:500 11px ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--fm)}
.fp-side input{width:100%;min-height:46px;border-radius:12px;border:1px solid var(--fl);background:rgba(38,27,17,.88);color:var(--ft);font:inherit;padding:0 12px}
.fp-list{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:min(62vh,640px);overflow:auto;padding-right:2px}
.fp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;width:100%;text-align:left;border:1px solid var(--fl);border-radius:12px;background:rgba(38,27,17,.88);color:var(--ft);font:inherit;padding:6px 12px;cursor:pointer}
.fp-row b{font:500 17px Georgia,serif}.fp-row small{display:block;color:var(--fm);font-size:12px}
.fp-row.on,.fp-row:hover,.fp-row:focus-visible{border-color:var(--fa)}
.fp-grp{margin:8px 2px 2px;font:500 11px ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--fm)}
.fp-pane{min-width:0}
.fp-empty{padding:18px;border:1px dashed var(--fl);border-radius:14px;color:var(--fm);background:rgba(24,31,38,.7)}
.fp-back{display:none;margin:0 0 10px;min-height:42px;padding:0 14px;border:1px solid var(--fl);border-radius:10px;background:rgba(38,27,17,.88);color:var(--fa);font:inherit;cursor:pointer}
.fp-head h2{margin:0;font:500 clamp(30px,5vw,44px)/1.05 Georgia,serif}
.fp-head p{margin:4px 0 0;color:var(--fm);font-size:14px}
.fp-card{margin:12px 0;border:1px solid var(--fl);border-radius:12px;background:rgba(38,27,17,.88);padding:12px 14px}
.fp-card .fp-k{margin-bottom:4px}
.fp-card .nm{font:500 20px Georgia,serif}
.fp-card p{margin:4px 0 0;font:15px/1.5 Georgia,serif;color:#CFCBC2}
.fp-card .rf{font:500 12px ui-monospace,Menlo,monospace;color:var(--fa)}
.fp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.fp-chip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--fl);background:rgba(38,27,17,.88);color:var(--ft);font:inherit;cursor:pointer}
.fp-chip:hover,.fp-chip:focus-visible{border-color:var(--fa)}
.fp-tabs{display:flex;gap:4px;margin:12px 0;padding:4px;border:1px solid var(--fl);border-radius:12px;background:rgba(38,27,17,.88);max-width:520px}
.fp-tabs button{flex:1;min-height:44px;border:0;border-radius:9px;background:none;color:var(--ft);font:500 14px inherit;cursor:pointer}
.fp-tabs button[aria-selected=true]{background:var(--fa);color:#1f1710;font-weight:700}
.fp-how{margin:0 0 14px;font-size:13px;color:var(--fm);max-width:64ch}
.fp-tl{list-style:none;margin:0;padding:0}
.fp-it{position:relative;padding:0 0 16px 28px}
.fp-it::before{content:"";position:absolute;left:5px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--fa);box-shadow:0 0 0 4px rgba(227,169,74,.18)}
.fp-it::after{content:"";position:absolute;left:10px;top:20px;bottom:-4px;width:1px;background:repeating-linear-gradient(var(--fl) 0 4px,transparent 4px 8px)}
.fp-it:last-child::after{display:none}
.fp-ref{font:500 12px ui-monospace,Menlo,monospace;color:var(--fa)}
.fp-who{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;margin:2px 0}
.fp-who button{border:0;background:none;padding:0;color:var(--ft);font:500 21px Georgia,serif;text-align:left;cursor:pointer;min-height:32px}
.fp-who button:hover,.fp-who button:focus-visible{color:var(--fa);text-decoration:underline}
.fp-badge{display:inline-block;padding:2px 8px;border-radius:10px;font:600 11px/1.4 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:var(--fg);color:#1f1710}
.fp-badge.l{background:#2B343D;color:var(--ft)}
.fp-brief{margin:0;font-size:14px;color:var(--fm)}
.fp-read{margin:2px 0 0;font-size:14px;color:var(--ft)}
.fp-open{margin-top:6px;border:0;background:none;padding:0;color:var(--fa);font:inherit;font-size:13px;cursor:pointer;min-height:32px;text-decoration:underline}
.fp-vc{margin:8px 0 0;padding:12px 14px;border:1px solid var(--fa);border-radius:12px;background:rgba(24,31,38,.96)}
.fp-vc p{margin:0;font:18px/1.55 Georgia,serif;overflow-wrap:anywhere}
.fp-vc mark,.fp-v mark{background:none;color:var(--fa);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.fp-vc button{margin-top:10px;min-height:40px;padding:0 14px;border:1px solid var(--fl);border-radius:10px;background:none;color:var(--ft);font:inherit;cursor:pointer}
.fp-v{padding:10px 0;border-top:1px solid var(--fl)}.fp-v:first-child{border-top:0}
.fp-v p{margin:2px 0 0;font:17px/1.55 Georgia,serif;overflow-wrap:anywhere}
.fp-with{margin-top:4px;font-size:13px;color:var(--fm)}
.fp-with button{background:none;border:0;padding:0 2px;color:var(--fa);font:inherit;text-decoration:underline;cursor:pointer;min-height:28px}
.fp-prow{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--fl)}
.fp-prow:first-child{border-top:0}
.fp-prow b{font:500 21px Georgia,serif}.fp-prow small{display:block;color:var(--fm)}
.fp-btn{min-height:42px;padding:0 16px;border-radius:12px;border:1px solid var(--fl);background:rgba(38,27,17,.88);color:var(--fa);font:600 14px inherit;cursor:pointer}
.fp-btn.pri{background:var(--fa);color:#1f1710;border:0}
.fp-acts{display:flex;gap:8px;flex-wrap:wrap}
/* a person's footsteps: a path that winds down the page, stops alternate sides on a wide screen */
.fp-path{list-style:none;margin:6px 0 0;padding:0;position:relative}
svg.fp-trail{z-index:2;position:absolute;left:0;top:0;pointer-events:none;overflow:visible}.fp-trail .edge{fill:none;stroke:rgba(120,78,36,.55);stroke-width:30;stroke-linecap:round;stroke-linejoin:round}.fp-trail .sand{fill:none;stroke:rgba(236,200,140,.34);stroke-width:25;stroke-linecap:round;stroke-linejoin:round}.fp-trail .foot{fill:#5a3a1c;opacity:.8}.fp-trail .stop circle{fill:#1f1710;stroke:var(--fa);stroke-width:2.5}.fp-trail .stop text{fill:var(--ft);font:700 12px ui-monospace,Menlo,monospace}.fp-st{z-index:1;isolation:isolate}.fp-st::after{content:"";position:absolute;z-index:-1;top:-8px;bottom:14px;left:36px;right:-6px;border-radius:12px;background:rgba(31,23,16,.8);border:1px solid rgba(240,182,92,.18)}
.fp-st{position:relative;padding:0 6px 28px 50px;min-height:56px}
.fp-st .no{display:none}
.fp-st .pl{border:0;background:none;padding:0;color:var(--ft);font:500 26px Georgia,serif;cursor:pointer;text-align:left;min-height:34px}
.fp-st .pl:hover,.fp-st .pl:focus-visible{color:var(--fa);text-decoration:underline}
@media (min-width:900px){
  .fp-st{width:50%;padding:0 78px 32px 0;text-align:right}
  .fp-st::after{left:-14px;right:62px}
  .fp-st:nth-child(even){margin-left:50%;padding:0 0 32px 78px;text-align:left}
  .fp-st:nth-child(even)::after{left:62px;right:-14px}
  .fp-st .fp-vc{text-align:left}
}
.fp-note{margin:14px clamp(14px,3vw,28px) 4px;padding:8px 12px;border-radius:10px;background:rgba(31,23,16,.78);width:fit-content;font-size:12.5px;color:var(--fm);max-width:80ch}
.fp-sheet{position:fixed;inset:0;z-index:2000;background:rgba(10,12,16,.85);display:flex;align-items:flex-end;justify-content:center}
.fp-sheet[hidden]{display:none}
.fp-box{width:min(560px,100%);max-height:94vh;overflow:auto;background:#1f1710;color:#ECE8DF;border:1px solid #2B343D;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.fp-box canvas{width:100%;height:auto;border-radius:10px;border:1px solid #2B343D;display:block;margin:8px 0}
.fp-box textarea{width:100%;min-height:150px;border-radius:10px;border:1px solid #2B343D;background:#181F26;color:#ECE8DF;font:inherit;padding:10px}
.fp-box .fp-tabs{max-width:none}
.fp-box .fp-btn{color:#E3A94A}
@media (min-width:760px){.fp-sheet{align-items:center}.fp-box{border-radius:18px}}
@media (max-width:899px){
  .fp-layout{grid-template-columns:minmax(0,1fr)}
  .fp-stage.has-sel .fp-side{display:none}
  .fp-stage.has-sel .fp-back{display:inline-flex;align-items:center}
  .fp-list{max-height:55vh}
}

.fp-scope{display:flex;gap:6px;margin:2px 0 4px}.fp-scope button{flex:1;min-height:40px;border:1px solid var(--fl);border-radius:999px;background:transparent;color:var(--fm);font:inherit;font-size:14px;cursor:pointer}.fp-scope button[aria-pressed="true"]{border-color:var(--fa);color:var(--ft)}