/* Sid & Siu fan pages, shared styles. Everything is scoped under .fp so the host site's header/footer is untouched. */
.fp{--ink:#16181d;--muted:#545b66;--line:#dfe2e7;--card:#fff;--bg:#f5f6f8;--brand:#d81e2a;--brand-ink:#fff;--soft:#fdeced;
  color:var(--ink);background:var(--bg);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.fp--siu{--brand:#0f9a4c;--soft:#e6f6ec;--bg:#f3f5f1;}
.fp *{box-sizing:border-box}
.fp img{max-width:100%;height:auto;display:block}
.fp a{color:var(--brand);text-underline-offset:2px}
.fp-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.fp-sec{padding:44px 0;border-top:1px solid var(--line)}
.fp-sec:first-child{border-top:0}
.fp-kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin:0 0 6px}
.fp h1{font-size:clamp(34px,6vw,56px);line-height:1.05;margin:0 0 14px;letter-spacing:-.02em}
.fp h2{font-size:clamp(24px,3.6vw,34px);line-height:1.15;margin:0 0 14px;letter-spacing:-.01em}
.fp h3{font-size:18px;margin:0 0 6px}
.fp p{margin:0 0 12px}
.fp-lead{font-size:clamp(17px,2.2vw,20px);color:var(--muted);max-width:40em}
/* hero */
.fp-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:36px 0 28px}
.fp-hero-art{background:radial-gradient(closest-side,var(--soft),transparent);border-radius:24px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative}
.fp-hero-art img{width:88%;transition:opacity .18s ease,transform .25s ease}
.fp-hero-art img.is-swap{opacity:0;transform:scale(.96)}
.fp-say{position:absolute;inset-inline-start:6%;top:6%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 12px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.06);max-width:70%}
.fp-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.fp-btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--brand);background:var(--brand);color:var(--brand-ink)!important;text-decoration:none;font-weight:700;border-radius:999px;padding:10px 18px;font-size:15px;cursor:pointer;line-height:1.2}
.fp-btn--ghost{background:transparent;color:var(--brand)!important}
.fp-btn:focus-visible,.fp-chip:focus-visible,.fp-opt:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
/* profile cards */
.fp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fp-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.fp-card ul{margin:6px 0 0;padding-inline-start:20px}
.fp-card--wide{grid-column:span 2}
.fp-lines{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.fp-lines li{background:var(--soft);border-radius:999px;padding:6px 12px;font-weight:600}
/* mood dial / level stepper */
.fp-dial{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:center}
.fp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.fp-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;color:var(--ink)}
.fp-chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.fp-readout{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.fp-readout .fp-arcs{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fp-readout .fp-line{font-size:22px;font-weight:800;margin:4px 0 6px}
.fp-meter{height:10px;border-radius:999px;background:#e5e9e3;overflow:hidden;margin:10px 0}
.fp-meter span{display:block;height:100%;width:0;background:linear-gradient(90deg,#14b65b,#b6f23d);transition:width .3s ease}
/* where to find */
.fp-where{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.fp-where ul{list-style:none;margin:8px 0 0;padding:0}
.fp-where li{display:flex;gap:10px;align-items:baseline;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line)}
.fp-where li:first-child{border-top:0}
.fp-where .fp-note{color:var(--muted);font-size:14px;display:block}
.fp-tag{flex:none;font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap}
.fp-tag--live{background:#e3f6e9;color:#0b6b35}
.fp-tag--soon{background:#eef0f3;color:#545b66}
.fp-tag--premiere{background:#fff3d6;color:#7a5200}
.fp-updated{color:var(--muted);font-size:14px}
.fp-news{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.fp-news li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.fp-news b{color:var(--brand);margin-inline-end:8px}
/* teammate + cast */
.fp-mate{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}
.fp-cast{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fp-cast .fp-card{display:flex;flex-direction:column;gap:6px}
.fp-cast .fp-q{font-size:40px;line-height:1;font-weight:800;color:var(--muted)}
/* quiz */
.fp-quiz{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;max-width:720px}
.fp-quiz ol{list-style:none;margin:0;padding:0}
.fp-quiz fieldset{border:0;margin:0 0 16px;padding:0}
.fp-quiz legend{font-weight:700;margin-bottom:8px}
.fp-opt{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 8px;cursor:pointer}
.fp-opt input{accent-color:var(--brand);width:18px;height:18px}
.fp-result{margin-top:12px;padding:14px;border-radius:14px;background:var(--soft);font-weight:600}
/* fan board */
.fp-board{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.fp-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.fp-form label{display:block;font-weight:600;margin:10px 0 4px}
.fp-form input[type=text],.fp-form textarea{width:100%;font:inherit;font-size:16px;border:1px solid #c9ced6;border-radius:10px;padding:10px 12px;background:#fff;color:var(--ink)}
.fp-form textarea{min-height:110px;resize:vertical}
.fp-hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.fp-msg{margin-top:10px;font-weight:600}
.fp-msg.is-err{color:#b3261e}
.fp-posts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fp-post{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.fp-post .fp-meta{font-size:13px;color:var(--muted);margin-bottom:4px}
.fp-post .fp-body{white-space:pre-wrap;overflow-wrap:anywhere}
.fp-post .fp-reply{font:inherit;font-size:13px;background:none;border:0;color:var(--brand);cursor:pointer;padding:4px 0 0}
.fp-small{font-size:14px;color:var(--muted)}
.fp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:820px){
  .fp-hero,.fp-dial,.fp-board,.fp-mate{grid-template-columns:1fr}
  .fp-hero-art{max-width:360px;margin:0 auto;width:100%}
  .fp-mate img{max-width:160px}
  .fp-grid,.fp-cast,.fp-where{grid-template-columns:1fr}
  .fp-card--wide{grid-column:auto}
  .fp-sec{padding:32px 0}
}
@media (prefers-reduced-motion:reduce){
  .fp *{transition:none!important;animation:none!important}
}
.fp-cast--after{margin-top:14px}
/* One Sid per page: on Sid's own fan page the page's interactive Sid is the mascot, so the site-wide corner launcher stays hidden. */
html:has(.fp--sid) #sid-guide-launcher,html:has(.fp--sid) #sid-guide-panel,html:has(.fp--sid) #sid-guide-actor,html:has(.fp--sid) #sid-chatbot-bubble,html:has(.fp--sid) #sid-chatbot-panel{display:none!important}
.fp [hidden]{display:none!important}
.fp-card .fp-lines{padding:0}