/* IrregularOdds v0.5 — targeted typography + name/community story. */
/* Retain original vertical introduction and original palette, including blue line. */
.intro h1 { line-height:1.04; }
.intro h1 > span { display:block; width:max-content; max-width:100%; }
/* Metallic gradient: charcoal-gray upper edge to bright silver lower edge. */
.metal-gradient { display:inline-block; background-clip:text; -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:none; }
.metal-silver { background-image:linear-gradient(180deg,#70717c 0%,#aaaab5 39%,#f7f6fa 100%); }
/* BAD PLAYS keeps blue identity, with a softly silver-blue lower edge. */
.metal-blue { background-image:linear-gradient(180deg,#404c64 0%,#48668d 50%,#ced9ed 100%); }
/* The existing purple emphasis stays purple, but fades from smoky grey at the top. */
.metal-purple { background-image:linear-gradient(180deg,#6b6471 0%,#9a76b2 45%,#d5a9f4 100%); }
/* Titles in paragraphs and buttons remain solid and readable. */
.section-head h2 .metal-gradient, .about h2 .metal-gradient { padding-bottom:.07em; margin-bottom:-.07em; }
.live-info h3 .metal-gradient { padding-bottom:.08em; margin-bottom:-.08em; }
/* In medium-grey mode the metallic finish turns dark enough for contrast. */
body.light .metal-silver { background-image:linear-gradient(180deg,#5d606b 0%,#34333f 48%,#181920 100%); }
body.light .metal-blue { background-image:linear-gradient(180deg,#555b69 0%,#234666 45%,#143754 100%); }
body.light .metal-purple { background-image:linear-gradient(180deg,#6a6070 0%,#592d76 55%,#46205f 100%); }
/* The offline card remains dark in either theme, so keep pale metallic text there. */
body.light .live-info .metal-silver { background-image:linear-gradient(180deg,#777c8b 0%,#bbc2cd 42%,#fbfbfd 100%); }
/* Circular creator image: subtle zoom, keeping the facial features centered. */
.about-portrait {width:230px;height:230px;max-width:100%; padding:0;border-radius:50%;
  overflow:hidden;border:2px solid color-mix(in srgb,var(--accent) 40%,var(--border));
  box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 7%,transparent),0 18px 50px rgba(0,0,0,.27);
  background:#020203;}
.about-portrait img {width:100%;height:100%;object-fit:cover;object-position:center 45%;
  transform:scale(1.13);filter:grayscale(1) contrast(1.05);}
/* Why IrregularOdds: a welcoming story section, not another huge art banner. */
.philosophy {border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.philosophy-top {display:flex;align-items:center;gap:24px;}
.philosophy-top .chapter-line {height:1px;flex:1;max-width:200px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.65;}
.philosophy-top .muted-eyebrow {color:var(--muted);}
.philosophy-grid {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(34px,6vw,105px);margin-top:30px;align-items:start;}
.philosophy h2 {font-size:clamp(44px,5.9vw,84px);margin:0;line-height:1.02;}
.philosophy h2 em {font-style:normal;}
.philosophy-highlight {font:700 clamp(19px,2.1vw,29px)/1.35 'Barlow Condensed',sans-serif;letter-spacing:.015em;margin-top:35px;padding-left:20px;border-left:2px solid var(--accent);color:var(--ink);}
.philosophy-story {position:relative;padding:14px 0 0 26px;border-left:1px solid color-mix(in srgb,var(--accent) 36%,var(--border));}
.philosophy-story>p {font-size:clamp(15px,1.25vw,17px);line-height:1.9;color:var(--muted);margin:0 0 20px;}
.philosophy-story>p:first-child {color:var(--ink);}
.philosophy-story strong {color:var(--ink);}
.philosophy-signoff {display:flex;gap:17px;align-items:center;padding:20px 0 2px;margin-top:28px;border-top:1px solid var(--border);}
.philosophy-sign {font-size:34px;color:var(--accent);line-height:1;}
.philosophy-signoff strong {font:600 20px/1.3 Georgia,serif;letter-spacing:.01em;}
.philosophy-signoff small {display:block;color:var(--muted);font-size:12px;margin-top:5px;}
.secondary-story-link {margin-left:24px;}
/* Community: discreet blue-violet artwork texture, distinct from hero/offline. */
.community {padding-top:85px;padding-bottom:100px;}
.community-shell {position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.18fr .82fr;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));background:#0d0c14;box-shadow:0 25px 65px rgba(0,0,0,.14);}
.community-shell::before {content:'';position:absolute;z-index:-1;inset:0;
  background:linear-gradient(90deg,rgba(12,10,20,.97) 10%,rgba(16,13,25,.90) 70%,rgba(13,16,28,.81)),
  url('assets/hero-purple.png') center / cover no-repeat;opacity:.98;}
.community-copy {padding:clamp(30px,5vw,68px);color:#f4eff7;}
.community h2 {font-size:clamp(46px,5vw,70px);margin:20px 0 26px;line-height:1.02;}
.community h2 em {font-style:normal;}
.community-copy p {font-size:15px;line-height:1.85;max-width:590px;color:#c4bfce;}
.community-copy p strong {color:#f5effa;}
.community-copy .community-lede {font-size:clamp(18px,1.8vw,24px);line-height:1.55;color:#f5f2f7;}
.community-actions {display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:27px;}
.community-actions .btn {margin-top:0;}
.community-main-cta {background:rgba(75,43,95,.30);color:#f7f0ff;border-color:#a17dd4;}
.community-second-cta {display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.1em;color:#d5cadd;}
.community-second-cta:hover {color:#fff;}
.community-actions .platform-icon {width:18px;height:18px;}
.community-side {display:flex;flex-direction:column;justify-content:center;gap:0;padding:clamp(30px,3vw,55px);border-left:1px solid rgba(178,151,216,.18);background:linear-gradient(130deg,rgba(66,36,83,.13),rgba(19,30,47,.34));color:#f1eefa;}
.community-symbol {font-size:58px;color:#b68bd4;opacity:.8;line-height:1;margin-bottom:22px;}
.community-note {padding:17px 0;border-top:1px solid rgba(220,204,237,.16);}
.community-note>span {color:#bb8fdf;display:block;font-size:10px;letter-spacing:.18em;font-weight:800;margin-bottom:7px;}
.community-note strong {font:700 22px/1.15 'Barlow Condensed',sans-serif;}
.community-note p {color:#b5b0be;font-size:12px;line-height:1.6;max-width:270px;margin:7px 0 0;}
body.light .community-shell {box-shadow:0 20px 45px rgba(35,24,48,.20);}
body.light .community .metal-silver {background-image:linear-gradient(180deg,#70717c,#b3b2c4 43%,#fff 100%);}
body.light .community .metal-purple {background-image:linear-gradient(180deg,#676170,#ae7dc8 55%,#edc6ff 100%);}
.footer-explore {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin:9px 0 28px;font-size:11px;letter-spacing:.08em;font-weight:700;color:var(--muted);}
.footer-explore span {color:var(--accent);font-size:10px;}
.footer-explore a:hover {color:var(--accent);}
@media(max-width:950px){.philosophy-grid {gap:30px;}.community-shell {grid-template-columns:1fr;}.community-side {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-left:none;border-top:1px solid rgba(178,151,216,.18);padding:20px 30px 25px;}.community-symbol {display:none;}.community-note {border-top:none;}.community-note strong {font-size:19px;}.philosophy h2 {font-size:clamp(42px,6vw,72px);}}
@media(max-width:650px){.philosophy-top .muted-eyebrow {display:none;}.philosophy-grid {grid-template-columns:1fr;gap:22px;}.philosophy h2 {font-size:clamp(42px,10vw,68px);}.philosophy-story {padding-left:18px;}.philosophy-highlight {margin-top:22px;}.secondary-story-link {display:flex;width:max-content;margin-left:0;}.community {padding:35px 16px 70px;}.community-copy {padding:30px 22px;}.community-side {display:flex;padding:18px 23px;}.community-note {border-top:1px solid rgba(220,204,237,.16);}.about-portrait {width:172px;height:172px;}.footer-explore {gap:8px;font-size:10px;}.community h2 {font-size:clamp(42px,9.2vw,60px);}}
