/* noir: the special section (Round 15). a who of us, b when the first tear falls, c a paper dove.
   The sections are the template's own fields (f-dark, f-bone) with a torn edge on top. */
.spn{--spk-ink:var(--on-dark,#EFE7D8);--spk-mute:var(--on-dark-2,#B9AC94);--spk-acc:var(--bronze,#B4913F);--spk-on:#17120C;--spk-line:rgba(216,187,120,.4);
  --spk-disp:var(--serif2,'Frank Ruhl Libre',serif);--spk-body:var(--sans,'Assistant',sans-serif);--spk-lat:var(--latin,'Cormorant Garamond',serif);--spk-h2w:300;
  --spk-btn:linear-gradient(135deg,#a8853a,#d9bd7c 50%,#a8853a);--spk-glow:rgba(180,145,63,.5);--spk-fld:rgba(255,255,255,.06)}
.field.spn{padding:clamp(58px,13vw,92px) 0 clamp(30px,7vw,48px)}
.field.spn.f-bone{--spk-ink:var(--ink,#17120C);--spk-mute:var(--ink-2,#4A4033);--spk-line:rgba(74,64,51,.24);--spk-fld:rgba(255,255,255,.6)}
.spn .spk-w{z-index:2}
.spn .spk-tg{font:italic 400 21px/1 var(--spk-lat);color:var(--bronze-lit,#E8D3A0)}
.spn.f-bone .spk-tg{color:var(--bronze,#B4913F)}
.spn .spk-q{margin:8px auto 0;max-width:20em;min-height:2.7em;display:grid;place-items:center;font:300 22px/1.35 var(--spk-disp);color:var(--spk-ink);text-wrap:balance}
.spn .spk-pills button{color:var(--spk-ink)}
.spn .spk-pills button[aria-pressed="true"]{color:#17120C}

/* ---------- a: who of us ---------- */
.spn-fig{position:absolute;inset:0;overflow:visible}
.spn-fig svg,.spn-tog svg{width:100%;height:100%;overflow:visible}
.spn-fig path,.spn-tog path{fill:none;stroke:#e6d2a2;stroke-width:4.6;stroke-linecap:round;stroke-linejoin:round}
.spn-pool{position:absolute;top:6%;width:56%;height:92%;border-radius:50%;opacity:0;background:radial-gradient(closest-side,rgba(216,187,120,.22),rgba(216,187,120,.07) 55%,transparent)}
.spn-pool.l{left:-4%}.spn-pool.r{right:-4%}
.spn-hit{position:absolute;top:0;bottom:0;width:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.spn-hit.l{left:0}.spn-hit.r{right:0}
.spn-tog{position:absolute;left:50%;top:0;height:100%;width:236px;margin-left:-118px;opacity:0}
.spn-who{display:flex;justify-content:center;gap:14px;direction:ltr}
.spn-who button{-webkit-appearance:none;appearance:none;border:0;background:transparent;cursor:pointer;min-width:128px;max-width:46%;min-height:50px;padding:0 14px;border-radius:99px;
  font:300 20px/1.1 var(--spk-disp);color:var(--spk-ink);box-shadow:inset 0 0 0 1px rgba(216,187,120,.55);transition:background-color .4s cubic-bezier(.16,1,.3,1),color .4s,opacity .4s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spn-who button.on{background:var(--bronze,#B4913F);color:#17120C}
.spn-who button.no{opacity:.4}
.spn-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.spn-dots i{width:22px;height:2px;background:rgba(239,231,216,.25);border-radius:2px;transition:background-color .5s}
.spn-dots i.on{background:var(--bronze-lit,#E8D3A0)}
.spn-fb{min-height:50px;display:grid;place-items:center;font:400 16.5px/1.45 var(--spk-body);color:var(--spk-mute);max-width:21em;margin:0 auto}
.spn-fb b{font:400 18px/1.4 var(--spk-disp);color:var(--bronze-lit,#E8D3A0)}
.spn-fin b{display:block;font:300 34px/1.12 var(--spk-disp);color:var(--spk-ink)}
.spn-fin span{display:block;margin-top:6px;font:400 15.5px/1.5 var(--spk-body);color:var(--spk-mute)}

/* ---------- b: the first tear ---------- */
.spn-dial{position:absolute;inset:0}
.spn-dial canvas{position:absolute;left:0;top:0}
.spn-knob{position:absolute;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;cursor:grab;touch-action:none;z-index:3;
  background:radial-gradient(circle at 38% 32%,#f6e4b0,#c79c4a 45%,#7a5a22);box-shadow:0 8px 16px -6px rgba(23,18,12,.45),inset 0 -2px 3px rgba(0,0,0,.25)}
.spn-knob::after{content:'';position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(180,145,63,.6);animation:spnKp 2.2s cubic-bezier(.16,1,.3,1) infinite}
.spn-knob.used::after{animation:none;opacity:0}
@keyframes spnKp{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.spn-read{position:absolute;left:0;right:0;bottom:0;text-align:center;pointer-events:none}
.spn-read b{display:block;direction:ltr;font:500 52px/1 var(--spk-lat);color:var(--ink,#17120C);font-variant-numeric:lining-nums tabular-nums}
.spn-read span{display:block;margin-top:2px;font:400 15px/1.3 var(--spk-body);color:var(--ink-2,#4A4033)}
.spn-tk{position:absolute;left:50%;top:6px;width:280px;height:226px;margin-left:-140px;z-index:5;visibility:hidden;padding:34px 22px 0;
  background:linear-gradient(180deg,#fbf8f1,#f0e8d8);
  -webkit-mask:var(--edge-t) top/100% 30px no-repeat,var(--edge) bottom/100% 30px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 56px) no-repeat;
  mask:var(--edge-t) top/100% 30px no-repeat,var(--edge) bottom/100% 30px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 56px) no-repeat}
.spn-tsh{position:absolute;left:50%;top:22px;width:270px;height:196px;margin-left:-135px;border-radius:6px;box-shadow:0 26px 40px -24px rgba(23,18,12,.55);z-index:4;visibility:hidden}
.spn-tk small{display:block;font:italic 400 18px/1 var(--spk-lat);color:var(--bronze,#B4913F)}
.spn-tk p{margin:8px 0 0;font:300 18px/1.3 var(--spk-disp);color:var(--ink,#17120C)}
.spn-tk b{display:block;direction:ltr;margin-top:2px;font:500 56px/1 var(--spk-lat);color:var(--ink,#17120C);font-variant-numeric:lining-nums}
.spn-tk em{display:block;margin-top:8px;font:normal 400 14.5px/1.4 var(--spk-body);color:var(--ink-2,#4A4033)}
.spn-stamp{position:absolute;left:14px;top:30px;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;z-index:6;visibility:hidden;text-align:center;
  border:2px solid rgba(160,124,48,.85);box-shadow:inset 0 0 0 5px rgba(160,124,48,.0),inset 0 0 0 6px rgba(160,124,48,.55);color:rgba(150,114,40,.95);
  font:500 13px/1.15 var(--spk-lat);letter-spacing:.06em;direction:ltr;transform:rotate(-14deg)}

/* ---------- c: the paper dove ---------- */
.spn-note{position:absolute;left:50%;top:56px;width:250px;margin-left:-125px;padding:28px 22px;z-index:2;
  background:linear-gradient(180deg,#fbf8f1,#efe7d6);font:300 20px/1.4 var(--spk-disp);color:#17120C;text-wrap:balance;
  -webkit-mask:var(--edge-t) top/100% 22px no-repeat,var(--edge) bottom/100% 22px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 40px) no-repeat;
  mask:var(--edge-t) top/100% 22px no-repeat,var(--edge) bottom/100% 22px no-repeat,linear-gradient(#000,#000) center/100% calc(100% - 40px) no-repeat}
.spn-bird{position:absolute;left:0;top:0;width:96px;height:70px;margin:-35px 0 0 -48px;z-index:4;opacity:0}
.spn-bird svg{width:100%;height:100%;overflow:visible}
.spn-trail{position:absolute;left:0;top:0;z-index:1}
.spn-sent{position:absolute;left:50%;top:96px;width:168px;margin-left:-84px;z-index:3;opacity:0;font:300 17px/1.4 var(--spk-disp);color:var(--spk-ink);text-wrap:balance}
.spn-sent small{display:block;margin-bottom:6px;font:italic 400 18px/1 var(--spk-lat);color:var(--bronze-lit,#E8D3A0)}