/* Social page (/social, one section per platform at #<k>) — layered on legal.css.
   Idea: every answer starts in the Guide, then travels. The hub map draws that once on load;
   each platform shows a live, tiny mock of what its posts look like. Awaken-Morphism surfaces
   (same recipe as the app and home page), Inter only, one brand blue. */
:root{
  --neu-shadow:174,174,192;
  --neu-out:6px 6px 14px rgba(var(--neu-shadow),.32),-6px -6px 12px rgba(255,255,255,1);
  --neu-in:inset 4px 4px 10px rgba(var(--neu-shadow),.30),inset -4px -4px 9px rgba(255,255,255,.95);
  --neu-brand:5px 5px 12px rgba(54,60,138,.35),-4px -4px 10px rgba(255,255,255,.9);
  --term:#1c1b22; --term-ink:#eef0f7; --ok:#3f8f66;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.45,.64,1);
}

/* reset legal.css "reading card" rules inside these pages */
.social p,.social ul,.social li{background:none;box-shadow:none;border-radius:0;padding:0;margin:0;list-style:none;}
.social a{border-bottom:none;}
html[data-theme="dark"] .social p,html[data-theme="dark"] .social ul{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
html[data-theme="dark"] .social p::before,html[data-theme="dark"] .social ul::before{display:none;}

.social{max-width:1080px;margin:0 auto;padding:0 26px 40px;}
.s-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:72px 0 36px;}
.s-hero-text{min-width:0;}
.social h1{font-size:clamp(2.5rem,6vw,4.1rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;color:var(--ink);margin:0;text-wrap:balance;}
.s-h1-2{display:block;font-weight:300;color:var(--brand-deep);}
.s-lede{font-size:1.16rem;line-height:1.6;color:var(--muted);max-width:32em;margin-top:22px !important;}
.s-lede a,.s-text a{color:var(--brand);border-bottom:1px solid var(--line);}
.s-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:30px;}
.s-btn{display:inline-flex;align-items:center;background:var(--brand);color:#fff !important;font-weight:600;padding:14px 26px;border-radius:999px;box-shadow:var(--neu-brand);transition:transform .25s var(--spring),box-shadow .25s;}
.s-btn:hover{transform:translateY(-2px);}
.s-btn:active{transform:translateY(1px);box-shadow:inset 3px 3px 8px rgba(0,0,0,.25);}
.s-handle{font-size:.95rem;color:var(--muted);}
.social a:focus-visible,.social .node:focus-visible,.social .hub:focus-visible{outline:2px solid var(--brand);outline-offset:4px;border-radius:12px;}

/* ---------- hub map ---------- */
.s-map{width:100%;height:auto;overflow:visible;display:block;}
.ray{fill:none;stroke:var(--brand);stroke-width:1.6;stroke-opacity:.38;stroke-dasharray:1;stroke-dashoffset:1;
  animation:ray-draw .9s var(--ease-out) forwards;animation-delay:calc(.35s + var(--i) * .12s);transition:stroke-opacity .25s,stroke-width .25s;}
.ray.on{stroke-opacity:1;stroke-width:2.6;}
.spark{fill:none;stroke:var(--brand);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:.07 .93;stroke-dashoffset:.07;opacity:0;
  animation:spark 7s linear infinite;animation-delay:calc(1.7s + var(--i) * .4s);}
@keyframes ray-draw{to{stroke-dashoffset:0;}}
@keyframes spark{0%{stroke-dashoffset:.07;opacity:1;}18%{stroke-dashoffset:-.93;opacity:1;}19%,100%{opacity:0;}}
.node{cursor:pointer;}
.node .dot,.node .halo{transform-box:fill-box;transform-origin:center;}
.node .dot{fill:var(--brand);transform:scale(0);animation:pop .55s var(--spring) forwards;animation-delay:calc(.95s + var(--i) * .12s);}
.node .halo{fill:var(--brand);opacity:0;transition:opacity .25s,transform .35s var(--spring);}
.node text{font:600 17px Inter,system-ui,sans-serif;fill:var(--ink);opacity:0;animation:fade .5s ease forwards;animation-delay:calc(1.1s + var(--i) * .12s);}
.node:hover .halo,.node:focus .halo,.node.on .halo{opacity:.16;transform:scale(1.25);}
.node:hover text,.node.on text{fill:var(--brand);}
.hub .hub-core{fill:var(--brand);}
.hub .hub-ring{fill:none;stroke:var(--brand);stroke-opacity:.22;stroke-width:1.5;transform-box:fill-box;transform-origin:center;transition:transform .4s var(--spring),stroke-opacity .3s;}
.hub:hover .hub-ring,.hub:focus .hub-ring{transform:scale(1.12);stroke-opacity:.5;}
.hub text{font:700 15px Inter,system-ui,sans-serif;fill:#fff;letter-spacing:.01em;}
@keyframes pop{to{transform:scale(1);}}
@keyframes fade{to{opacity:1;}}

/* ---------- rail: sticks under the topbar, lights the platform you're reading ---------- */
html{scroll-behavior:smooth;}
.s-rail{position:sticky;top:76px;z-index:5;display:flex;gap:10px;justify-content:safe center;overflow-x:auto;scrollbar-width:none;padding:14px 12px;margin:20px -12px 0;
  background:linear-gradient(var(--bg) 70%,transparent);}
.s-rail::-webkit-scrollbar{display:none;}
.s-rail .s-pill{flex:none;}
.s-rail .s-pill.on{background:var(--brand);color:#fff;box-shadow:var(--neu-brand);}

/* ---------- one section per platform ---------- */
.s-plat{scroll-margin-top:150px;padding:72px 0 24px;}
.s-plat + .s-plat{border-top:1px solid var(--line);}
.s-plat-head{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;}
.s-flip .s-plat-text{order:2;}
.s-plat-name{font-size:1rem;font-weight:600;color:var(--brand);margin-bottom:10px !important;}
.social .s-plat h2{font-size:clamp(1.9rem,4vw,2.8rem);letter-spacing:-.03em;line-height:1.08;margin:0;text-wrap:balance;}
.s-plat-body{margin-top:36px;}
.s-plat .s-finds{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.s-sub{margin-top:36px;}
.social h3{font-size:1.2rem;font-weight:700;color:var(--ink);margin:0 0 16px;}

/* ---------- platform colours: each platform wears its own, so you know where you are at a glance.
   Setting --brand per platform recolours its section, pill, star, button and preview in one go.
   Shades are darkened where needed so white button text stays readable (AA). ---------- */
.social [data-k="instagram"]{--brand:#C13584;--brand-deep:#9b2a6a;--accent:#f58fc0;}
.social [data-k="youtube"]{--brand:#CC0000;--brand-deep:#a30000;--accent:#ff7070;}
.social [data-k="x"]{--brand:#0f1419;--brand-deep:#0f1419;--accent:#e7e9ea;}
.social [data-k="reddit"]{--brand:#C83D00;--brand-deep:#a33200;--accent:#ff8a57;}
.social [data-k="github"]{--brand:#24292f;--brand-deep:#24292f;--accent:#e6edf3;}
.social [data-k="linkedin"]{--brand:#0A66C2;--brand-deep:#08529c;--accent:#5aa9f2;}
.s-plat{border-top:none !important;margin-top:28px;padding:56px 44px 44px;border-radius:32px;
  background:color-mix(in srgb,var(--brand) 6%,var(--bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 14%,transparent);}
.s-plat .pv{background:color-mix(in srgb,var(--brand) 3%,var(--bg));}
.s-plat .s-find,.s-plat .s-repo{background:color-mix(in srgb,var(--brand) 2%,var(--bg)) !important;}
.s-plat .s-btn{box-shadow:0 8px 18px color-mix(in srgb,var(--brand) 35%,transparent),-4px -4px 10px rgba(255,255,255,.9);}
.s-plat .ig-dots i{background:color-mix(in srgb,var(--brand) 25%,transparent);}
.s-plat .rd-body i,.s-plat .pv-x::before{background:color-mix(in srgb,var(--brand) 20%,transparent);}
.s-rail .s-pill:hover{color:var(--brand);}
html[data-theme="dark"] .s-plat{background:color-mix(in srgb,var(--accent) 9%,rgba(0,0,0,.5));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
html[data-theme="dark"] .s-plat .s-plat-name{color:var(--accent);}
html[data-theme="dark"] .s-plat .s-btn{box-shadow:0 0 22px color-mix(in srgb,var(--accent) 40%,transparent);}
html[data-theme="dark"] .s-plat[data-k="x"] .s-btn,html[data-theme="dark"] .s-plat[data-k="github"] .s-btn,
html[data-theme="dark"] .s-rail [data-k="x"].on,html[data-theme="dark"] .s-rail [data-k="github"].on{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45) !important;}

/* ---------- previews: shared stage ---------- */
.pv{position:relative;height:160px;border-radius:16px;background:var(--bg);box-shadow:var(--neu-in);overflow:hidden;font-size:12px;
  display:flex;align-items:center;justify-content:center;}
.pv-big{height:360px;font-size:19px;border-radius:26px;}
.s-stage{min-width:0;}
.pv *{animation-play-state:paused;}
.play .pv *{animation-play-state:running;}

/* Instagram: a carousel that swipes itself */
.ig-track{position:absolute;inset:12% 0 22%;display:flex;width:300%;animation:ig 6.6s var(--ease-out) infinite;}
.ig-slide{width:33.333%;padding:0 12%;display:flex;flex-direction:column;justify-content:center;gap:.35em;}
.ig-slide b,.ig-slide small{display:block;}
.ig-slide{background:none;}
.ig-slide b{font-size:1.25em;line-height:1.2;color:var(--brand-deep);font-weight:700;}
.ig-slide small{color:var(--muted);font-size:1em;}
.ig-track::before{content:none;}
.ig-dots{position:absolute;bottom:9%;display:flex;gap:.5em;}
.ig-dots i{width:.55em;height:.55em;border-radius:50%;background:rgba(72,80,178,.22);animation:dot 6.6s infinite;}
.ig-dots i:nth-child(2){animation-delay:2.2s;} .ig-dots i:nth-child(3){animation-delay:4.4s;}
@keyframes ig{0%,26%{transform:translateX(0);}33%,59%{transform:translateX(-33.333%);}66%,92%{transform:translateX(-66.666%);}100%{transform:translateX(0);}}
@keyframes dot{0%,30%{background:var(--brand);transform:scale(1.25);}34%,100%{background:rgba(72,80,178,.22);transform:none;}}

/* YouTube: a 10-second Short in miniature */
.yt-frame{position:relative;height:86%;aspect-ratio:9/16;border-radius:.9em;background:var(--brand);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;padding:0 .8em;text-align:center;box-shadow:0 .6em 1.4em rgba(54,60,138,.3);}
.yt-line{font-weight:700;line-height:1.2;position:relative;}
.yt-line.l1{animation:yt1 6s infinite;}
.yt-line.l1::after{content:"";position:absolute;left:0;top:55%;height:.12em;width:0;background:#fff;animation:strike 6s infinite;}
.yt-line.l2{opacity:0;font-weight:500;animation:yt2 6s infinite;}
.yt-lock{width:1.5em;height:1.2em;border-radius:.25em;background:#fff;position:relative;transform:scale(0);animation:lock 6s var(--spring) infinite;}
.yt-lock::before{content:"";position:absolute;left:.3em;right:.3em;top:-.6em;height:.75em;border:.18em solid #fff;border-bottom:none;border-radius:.6em .6em 0 0;}
.yt-bar{position:absolute;left:.7em;right:.7em;bottom:.7em;height:.25em;border-radius:1em;background:rgba(255,255,255,.3);overflow:hidden;}
.yt-bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(0);animation:bar 6s linear infinite;}
@keyframes yt1{0%{opacity:0;}8%,40%{opacity:1;}48%,100%{opacity:0;}}
@keyframes strike{0%,22%{width:0;}32%,100%{width:100%;}}
@keyframes yt2{0%,46%{opacity:0;transform:translateY(.4em);}54%,92%{opacity:1;transform:none;}100%{opacity:0;}}
@keyframes lock{0%,52%{transform:scale(0);}62%,92%{transform:scale(1);}100%{transform:scale(0);}}
@keyframes bar{to{transform:scaleX(1);}}

/* X: a thread that writes itself */
.pv-x{flex-direction:column;align-items:stretch;justify-content:center;gap:.7em;padding:0 9%;}
.pv-x::before{content:"";position:absolute;left:calc(9% + .45em);top:24%;bottom:24%;width:.14em;background:rgba(72,80,178,.25);}
.x-post{position:relative;padding-left:1.8em !important;font-size:1em;line-height:1.35;color:var(--ink);opacity:0;animation:post 6s var(--ease-out) infinite;}
.x-post::before{content:"";position:absolute;left:.1em;top:.2em;width:.9em;height:.9em;border-radius:50%;background:var(--brand);}
.x-post:nth-child(2){animation-delay:.6s;} .x-post:nth-child(3){animation-delay:1.2s;}
@keyframes post{0%{opacity:0;transform:translateY(.6em);}10%,85%{opacity:1;transform:none;}95%,100%{opacity:0;}}

/* Reddit: a question that gets answered */
.pv-rd{justify-content:flex-start;align-items:center;gap:1em;padding:0 9%;}
.rd-vote{flex:none;}
.rd-up{display:block;width:0;height:0;border-left:.7em solid transparent;border-right:.7em solid transparent;border-bottom:.95em solid var(--brand);animation:up 6s var(--spring) infinite;}
.rd-body{display:flex;flex-direction:column;gap:.45em;min-width:0;flex:1;}
.rd-body b{font-size:1.05em;line-height:1.3;color:var(--ink);}
.rd-body i{display:block;height:.45em;border-radius:1em;background:rgba(72,80,178,.18);transform-origin:left;transform:scaleX(0);animation:line 6s var(--ease-out) infinite;}
.rd-body i:nth-of-type(2){width:86%;animation-delay:.25s;} .rd-body i:nth-of-type(3){width:64%;animation-delay:.5s;}
.rd-body em{font-style:normal;font-size:.95em;color:var(--brand);font-weight:600;opacity:0;animation:fadeloop 6s infinite;animation-delay:1.1s;}
@keyframes up{0%,10%{transform:none;}18%{transform:translateY(-.5em);}26%,100%{transform:none;}}
@keyframes line{0%{transform:scaleX(0);}14%,88%{transform:scaleX(1);}100%{transform:scaleX(0);}}
@keyframes fadeloop{0%{opacity:0;}10%,85%{opacity:1;}100%{opacity:0;}}

/* GitHub: the real check, typed out */
.pv-gh{background:var(--term);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);justify-content:flex-start;padding:0 8%;}
.pv-gh code{display:flex;flex-direction:column;gap:.6em;font:500 .9em/1.4 ui-monospace,"SF Mono",Menlo,monospace;color:var(--term-ink);}
.gh-l{display:block;white-space:nowrap;overflow:hidden;}
.gh-cmd::before{content:"$ ";color:#9aa3ff;}
.gh-cmd{width:0;animation:type 6s steps(39,end) infinite;}
.gh-out{color:#8fe0b4;opacity:0;animation:out 6s infinite;}
.gh-out::before{content:"✓ ";}
@keyframes type{0%{width:0;}40%,92%{width:39ch;}100%{width:0;}}
@keyframes out{0%,46%{opacity:0;}52%,92%{opacity:1;}100%{opacity:0;}}

/* LinkedIn: a note from the founder */
.pv-li{justify-content:flex-start;align-items:flex-start;gap:.9em;padding:12% 9% 0;}
.li-av{flex:none;width:2.6em;height:2.6em;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.05em;box-shadow:var(--neu-brand);}
.li-txt{display:flex;flex-direction:column;gap:.15em;min-width:0;}
.li-txt b{font-size:1.02em;color:var(--ink);}
.li-txt small{font-size:.9em;color:var(--muted);}
.li-txt p{margin-top:.6em !important;font-size:.98em;line-height:1.4;color:var(--ink);opacity:0;animation:fadeloop 6s infinite;animation-delay:.4s;}

/* ---------- platform page blocks ---------- */
.s-block{margin-top:64px;}
.social h2{font-size:1.5rem;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:0 0 20px;}
.s-finds{display:grid;gap:16px;}
.s-find{display:grid;gap:4px;padding:20px 24px !important;border-radius:20px !important;background:var(--bg) !important;box-shadow:var(--neu-out) !important;}
.s-find strong{font-size:1.08rem;color:var(--ink);}
.s-find span{color:var(--muted);}
.s-also{margin-top:18px !important;color:var(--muted);}
.s-also a{color:var(--brand);}
.s-text{color:var(--muted);max-width:40em;font-size:1.05rem;line-height:1.65;margin-top:10px !important;}
.s-text code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.92em;background:var(--tint);padding:.1em .4em;border-radius:6px;color:var(--ink);}
.s-repos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.s-repo{display:grid;gap:6px;padding:20px 22px;border-radius:20px;background:var(--bg);box-shadow:var(--neu-out);color:var(--ink);transition:transform .35s var(--spring);}
.s-repo:hover{transform:translateY(-3px);}
.s-repo strong{font-size:1.05rem;color:var(--brand-deep);}
.s-repo span{color:var(--muted);font-size:.97rem;line-height:1.5;}
.s-code{margin:16px 0 6px;background:var(--term);color:var(--term-ink);border-radius:16px;padding:18px 22px;overflow-x:auto;font:500 .95rem/1.6 ui-monospace,"SF Mono",Menlo,monospace;}
.s-origin{padding:28px 30px;border-radius:24px;box-shadow:var(--neu-in);background:var(--bg);}
.s-origin h2{margin-bottom:6px;}
.s-pill{padding:9px 18px;border-radius:999px;background:var(--bg);box-shadow:var(--neu-out);color:var(--ink);font-weight:500;font-size:.95rem;transition:transform .3s var(--spring),color .2s;}
.s-pill:hover{transform:translateY(-2px);color:var(--brand);}

/* ---------- dark mode: glass over the constellation, like the rest of the site ---------- */
html[data-theme="dark"] .social h1,html[data-theme="dark"] .social h2{color:#fff;text-shadow:0 0 26px rgba(120,130,255,.45);}
html[data-theme="dark"] .s-h1-2{color:var(--accent);}
html[data-theme="dark"] .s-find,html[data-theme="dark"] .s-repo,html[data-theme="dark"] .s-pill,
html[data-theme="dark"] .s-origin,html[data-theme="dark"] .pv:not(.pv-gh){background:rgba(0,0,0,.42) !important;box-shadow:none !important;border:1px solid rgba(160,170,255,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
html[data-theme="dark"] .s-pill,html[data-theme="dark"] .s-find strong,html[data-theme="dark"] .s-repo strong,
html[data-theme="dark"] .x-post,html[data-theme="dark"] .rd-body b,html[data-theme="dark"] .li-txt b,html[data-theme="dark"] .li-txt p{color:#fff;}
html[data-theme="dark"] .ig-slide b{color:#fff;}
html[data-theme="dark"] .node text{fill:#eef0f7;}
html[data-theme="dark"] .ray,html[data-theme="dark"] .spark,html[data-theme="dark"] .node .dot,html[data-theme="dark"] .node .halo{stroke:var(--accent);}
html[data-theme="dark"] .node .dot,html[data-theme="dark"] .node .halo{fill:var(--accent);}
html[data-theme="dark"] .s-text code{background:rgba(255,255,255,.1);color:#fff;}
html[data-theme="dark"] .s-rail{background:linear-gradient(rgba(6,7,12,.85) 70%,transparent);}
html[data-theme="dark"] .s-rail::-webkit-scrollbar{display:none;}
.s-rail .s-pill{flex:none;}
.s-rail .s-pill.on{background:var(--brand) !important;}
html[data-theme="dark"] .social h3{color:#fff;}
html[data-theme="dark"] .s-btn{box-shadow:0 0 22px rgba(120,130,255,.45);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .s-hero{grid-template-columns:1fr;gap:28px;padding-top:48px;}
  .s-plat-head{grid-template-columns:1fr;gap:28px;}
  .s-flip .s-plat-text{order:0;}
  .s-plat{padding:40px 24px 30px;}
  .pv-big{height:300px;font-size:17px;}
}
@media (max-width:560px){
  .social{padding:0 16px 30px;}
  .s-repos{grid-template-columns:1fr;}
  .s-rail{margin:12px -16px 0;padding:12px 16px;}
  .s-origin{padding:22px;}
  .s-plat{padding:32px 18px 24px;border-radius:24px;margin-left:-6px;margin-right:-6px;}
  .pv-big{height:260px;font-size:15px;}
  .node text{font-size:20px;}
}

/* ---------- reduced motion: everything rests in its finished state ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .social *,.social *::before,.social *::after{animation:none !important;transition:none !important;}
  .ray{stroke-dashoffset:0;} .spark{opacity:0;}
  .node .dot{transform:none;} .node text{opacity:1;}
  .ig-dots i:first-child{background:var(--brand);}
  .yt-line.l2,.x-post,.rd-body em,.gh-out,.li-txt p,.yt-lock{opacity:1;transform:none;}
  .yt-line.l1{display:none;} .rd-body i{transform:none;} .gh-cmd{width:39ch;}
}