/* Mindfuse "Listening" art pages: shared layer for the three research pages
   (/science-of-talking-to-strangers, /science-of-connection, /loneliness-visualized).
   Loads AFTER /flagship/flagship.css (fonts, header, footer, store buttons).
   reach.html does not load this file. */

:root{
  /* Totality: the app's night (see flagship.css). Night only. */
  --night:#02050F;
  --bg:#050E19;
  --bg2:#070916;
  --card:#0C1623;
  --card2:#111D2B;
  --ink:#EEE9E1;
  --ink-soft:#D3D0D6;
  --muted:#A9A7B6;
  --faint:#83829A;
  --line:rgba(143,184,200,.18);
  --line-soft:rgba(143,184,200,.10);
  --ember:#8FB8C8;
  --ember-soft:rgba(143,184,200,.09);
  --ember-glow:rgba(143,184,200,.22);
  --voice-a:#6A80D8;
  --voice-b:#6CC48C;
  --dot-off:#1C2A3D;
  --cta:#9FC5A8;
  --cta-hover:#B2D3B8;
  --cta-ink:#0B1A14;
  --disp:'Cormorant Garamond','Lora',Georgia,'Times New Roman',serif;
  --body:'Instrument Sans','DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease-settle:cubic-bezier(.22,.61,.36,1);
  --ease-breath:cubic-bezier(.45,0,.55,1);
  --d-quick:240ms; --d-calm:600ms; --d-slow:1200ms; --d-tide:2400ms;
  --w-prose:40rem;
  --gutter:clamp(1.15rem,.6rem + 2.4vw,2.5rem);
  --struck-o:.75;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.mf-listen{
  margin:0;color:var(--ink);
  font:400 1.0625rem/1.72 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:var(--disp);font-style:italic;font-weight:500;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.012em}
p{margin:0 0 1.3em}
b,strong{font-weight:500;color:var(--ink)}
em{font-family:var(--disp);font-style:italic}
a{color:var(--ember);text-decoration-color:rgba(var(--ember-rgb),.45);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ember)}
sup{line-height:0;font-size:.68em;font-family:var(--body);font-style:normal}
sup a{text-decoration:none;color:var(--muted);padding:0 .12em;font-weight:500}
sup a:hover{color:var(--ember)}
button{font:inherit;cursor:pointer;color:inherit}
::selection{background:rgba(var(--ember-rgb),.3);color:var(--ink)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:3px}

/* ---------- type roles ---------- */
.label{
  display:inline-flex;align-items:center;gap:.7em;
  font:500 .7rem/1.3 var(--body);letter-spacing:.23em;text-transform:uppercase;color:var(--ember);
}
.label::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--ember);box-shadow:0 0 8px var(--ember-glow)}
.label.plain::before{display:none}
.turn{font-style:italic;font-weight:400;color:var(--ember)}
.lede{font-size:clamp(1.1rem,1rem + .45vw,1.3rem);line-height:1.6;color:var(--ink-soft);font-weight:400}
.kicker{font-family:var(--disp);font-style:italic;font-size:1.18rem;line-height:1.5;color:var(--muted)}
.prose p{color:var(--ink-soft)}
.prose p b,.prose p strong{color:var(--ink)}
.num{font-family:var(--disp);font-style:italic;color:var(--ember);font-weight:400}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:var(--gutter)}
.prose{max-width:var(--w-prose);margin-inline:auto}
.wide{max-width:780px;margin-inline:auto}
.chapter{padding-block:clamp(4.5rem,3rem + 7vw,8.5rem)}
.chapter-head{margin-bottom:2.2rem}
.chapter-head .label{margin-bottom:1.3rem}
.chapter-head h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);margin-bottom:.45em}
.hair{height:1px;border:0;margin:0 auto;max-width:780px;background:linear-gradient(90deg,transparent,rgba(110,180,200,.3),rgba(170,120,160,.24),rgba(120,195,150,.28),transparent)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 50%,rgba(var(--bg-rgb),.86),rgba(var(--bg-rgb),0) 78%)}
/* the Totality horizon under every hero: a thin violet-rose band, teal left, green right */
.hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 0,rgba(64,53,84,.0) 30%,rgba(64,53,84,.22) 49.6%,rgba(110,180,200,.32) 50%,rgba(170,120,160,.0) 50.4%,rgba(7,9,22,.6) 52%,rgba(5,14,25,0) 100%),
    radial-gradient(48% 22% at 50% 50%,rgba(120,80,118,.18),transparent 72%),
    radial-gradient(30% 20% at 0% 50%,rgba(70,150,172,.42),transparent 72%),
    radial-gradient(30% 20% at 100% 50%,rgba(82,168,116,.34),transparent 72%);
}
.hero-inner{position:relative;text-align:center;padding:112px var(--gutter) 72px;max-width:920px}
.hero h1{font-size:clamp(2.5rem,1.35rem + 5.2vw,5rem);line-height:1.04;letter-spacing:-.028em;margin:.55em 0 .5em}
.hero .deck{max-width:34em;margin:0 auto 1.8em;font-family:var(--disp);font-style:italic;font-size:clamp(1.06rem,1rem + .5vw,1.26rem);line-height:1.6;color:var(--muted)}
.hero .byline{font:500 .7rem/1.7 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.hero .byline a{color:var(--muted);text-decoration:none}
.cue{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  font:500 .66rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.cue::after{content:"";display:block;width:1px;height:28px;margin:10px auto 0;background:linear-gradient(var(--faint),transparent)}

/* ---------- panels & figures ---------- */
.panel{
  background:linear-gradient(180deg,rgba(143,184,200,.055),rgba(143,184,200,.025)),rgba(var(--bg-rgb),.55);
  border:.5px solid var(--line);border-radius:20px;
  padding:clamp(22px,4vw,32px);margin:2.4rem 0;
}
.ptitle{display:flex;align-items:center;gap:.9em;margin:0 0 1.3em;
  font:500 .68rem/1.6 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ptitle::after{content:"";flex:1;min-width:16px;height:1px;background:var(--line-soft)}
.psub{font-size:.95rem;color:var(--muted);margin-top:-.6em}
.caption{font-size:.86rem;line-height:1.6;color:var(--faint);margin:1rem 0 0}
.caption em{color:var(--muted)}
.pull{margin:3rem auto;max-width:var(--w-prose);padding:0;border:0}
.pull p{font-family:var(--disp);font-style:italic;font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);line-height:1.42;color:var(--ink);margin:0 0 .7em;text-wrap:balance}
.pull p::before{content:"\201C";color:var(--ember)}
.pull p::after{content:"\201D";color:var(--ember)}
.pull cite{display:block;font:500 .68rem/1.7 var(--body);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.note{border-left:2px solid var(--ember);background:var(--ember-soft);border-radius:0 14px 14px 0;padding:18px 22px;margin:2rem 0;font-size:.98rem;color:var(--ink-soft)}
.illus{font:500 .62rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.5em;border-radius:999px;border:0;
  background:var(--cta);color:var(--cta-ink);font:500 .98rem/1 var(--body);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:background var(--d-quick) var(--ease-settle),transform var(--d-quick) var(--ease-settle)}
.btn:hover{background:var(--cta-hover);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.btn-ghost{background:rgba(143,184,200,.06);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(143,184,200,.24)}
.btn-ghost:hover{background:rgba(143,184,200,.1);box-shadow:inset 0 0 0 1px rgba(var(--ember-rgb),.6)}
.linkbtn{background:none;border:0;padding:.4em 0;color:var(--muted);font-size:.92rem;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.linkbtn:hover{color:var(--ember);text-decoration-color:var(--ember)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:1.4rem}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;margin-top:-10.5px;
  background:var(--ember);border:4px solid var(--card);box-shadow:0 0 0 1px rgba(var(--ember-rgb),.5),0 0 14px rgba(var(--ember-rgb),.16);cursor:grab}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:var(--line)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ember);border:4px solid var(--card);box-shadow:0 0 0 1px rgba(var(--ember-rgb),.5);cursor:grab}
.ends{display:flex;justify-content:space-between;gap:1em;font:500 .66rem/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.read{font-family:var(--disp);font-size:1.35rem;color:var(--ink);min-height:1.5em;margin:.3em 0 0}
.read b{font-weight:400;font-style:italic;color:var(--ember)}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:24px;box-shadow:inset 0 0 0 .5px var(--line);background:rgba(var(--night-rgb),.4)}
.seg button{border:0;background:transparent;border-radius:999px;padding:.55em 1.1em;font:500 .86rem/1 var(--body);color:var(--muted);
  transition:background var(--d-calm) var(--ease-settle),color var(--d-calm) var(--ease-settle)}
.seg button[aria-pressed="true"]{background:var(--card2);color:var(--ink);box-shadow:inset 0 0 0 .5px rgba(var(--ember-rgb),.5)}

/* ---------- context strike: a word losing its power ---------- */
.ctx{position:relative;white-space:nowrap;color:var(--ink);transition:color var(--d-slow) var(--ease-settle) .2s,opacity var(--d-slow) var(--ease-settle) .2s}
.ctx::after{content:"";position:absolute;left:-2%;right:-2%;top:55%;height:1.5px;background:var(--ember);transform:scaleX(0);transform-origin:left center;transition:transform var(--d-calm) var(--ease-settle)}
.ctx.is-struck{color:var(--faint);opacity:var(--struck-o)}
.ctx.is-struck::after{transform:scaleX(1)}

/* ---------- reveal (fail-safe: hidden only once JS has armed it) ---------- */
html.js-anim .rv{opacity:0;transform:translateY(16px);transition:opacity var(--d-slow) var(--ease-settle),transform var(--d-slow) var(--ease-settle)}
html.js-anim .rv.in{opacity:1;transform:none}
.hide{display:none}

/* ---------- progress hairline ---------- */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--voice-a),var(--ember),var(--voice-b));opacity:.7;z-index:60}

/* ---------- closing CTA ---------- */
.closing{position:relative;overflow:hidden;text-align:center;padding:clamp(5rem,4rem + 6vw,9rem) var(--gutter) clamp(4rem,3rem + 4vw,6rem);isolation:isolate}
.closing .orb{position:absolute;z-index:-1;width:min(70vw,520px);aspect-ratio:1;border-radius:50%;filter:blur(18px);opacity:.13;top:12%}
.closing .orb.a{left:50%;margin-left:calc(min(70vw,520px) * -.85);background:radial-gradient(circle,var(--voice-a),transparent 66%)}
.closing .orb.b{left:50%;margin-left:calc(min(70vw,520px) * -.15);background:radial-gradient(circle,var(--voice-b),transparent 66%)}
.closing h2{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);max-width:15em;margin:1.2rem auto .5em}
.closing .deck{max-width:34rem;margin:0 auto 2.2rem;color:var(--ink-soft);font-weight:400;font-size:1.1rem}
.closing .fine{margin:1.6rem 0 0;font-size:.86rem;color:var(--faint)}
.closing .home{display:inline-block;margin-top:1.6rem;font:500 .72rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:.6em 0;border-bottom:1px solid var(--line)}
.closing .home:hover{color:var(--ember);border-bottom-color:var(--ember)}
.closing .share{margin-top:1.2rem}

/* ---------- sources ---------- */
.sources{position:relative;border-top:0;padding:64px var(--gutter) 56px;background:linear-gradient(180deg,rgba(7,9,22,.85),rgba(2,5,15,.9))}
.sources::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(110,180,200,.32),rgba(170,120,160,.26),rgba(120,195,150,.3))}
.sources h2{font-size:1.8rem;margin-bottom:.4em}
.sources .s-sub{color:var(--muted);font-size:.95rem;margin-bottom:1.8em}
.sources ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:1em}
.sources li{font-size:.9rem;line-height:1.65;color:var(--ink-soft)}
.sources li::marker{color:var(--ember);font-weight:500}
.sources .ti{font-style:italic;font-family:var(--body)}
.sources .find{display:block;color:var(--faint);margin-top:.2em}
.sources a{word-break:break-word}
.sources .method{font-size:1rem;line-height:1.6;color:var(--muted);margin-top:2.2em;font-family:var(--disp);font-style:italic}

.mf-more{background:transparent}
body.mf-listen .mf-more{max-width:none;background:rgba(2,5,15,.9)}
body.mf-listen .mf-more > *{max-width:640px;margin-inline:auto}

@media (max-width:520px){
  .hero .label::before{display:none}
  .panel{padding:22px 16px}
  .hero-inner{padding-top:100px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important}
  html.js-anim .rv{opacity:1;transform:none}
}

/* ---------- SVG artwork: the pages draw with literal dark-palette colours;
   CSS outranks presentation attributes, so they follow the theme here
   (night only). ---------- */
[fill="#F3E9DA"]{fill:var(--ink)} [fill="#DCCFBC"]{fill:var(--ink-soft)} [fill="#B9AA94"]{fill:var(--muted)}
[fill="#958873"]{fill:var(--faint)} [fill="#130f0c"]{fill:var(--bg)} [fill="#E8B57A"]{fill:var(--ember)} [fill="#3a3029"]{fill:var(--dot-off)}
[fill="#5B6CFF"]{fill:var(--voice-a)} [fill="#7AD67C"]{fill:var(--voice-b)}
[stroke="#F3E9DA"]{stroke:var(--ink)} [stroke="#E8B57A"]{stroke:var(--ember)}
[stroke="#5B6CFF"]{stroke:var(--voice-a)} [stroke="#7AD67C"]{stroke:var(--voice-b)}
[stop-color="#5B6CFF"]{stop-color:var(--voice-a)} [stop-color="#7AD67C"]{stop-color:var(--voice-b)} [stop-color="#E8B57A"]{stop-color:var(--ember)}
[fill="rgba(243,233,218,0.12)"]{fill:rgba(var(--ink-rgb),.12)}
[stroke="rgba(243,233,218,0.07)"]{stroke:rgba(var(--ink-rgb),.07)}
[stroke="rgba(243,233,218,.08)"]{stroke:rgba(var(--ink-rgb),.08)}
[stroke="rgba(243,233,218,0.12)"]{stroke:rgba(var(--ink-rgb),.12)}
[stroke="rgba(243,233,218,.2)"]{stroke:rgba(var(--ink-rgb),.2)}
[stroke="rgba(243,233,218,0.24)"]{stroke:rgba(var(--ink-rgb),.24)}
[stroke="rgba(243,233,218,0.3)"]{stroke:rgba(var(--ink-rgb),.3)}
[stroke="rgba(243,233,218,0.34)"]{stroke:rgba(var(--ink-rgb),.34)}