/* SOMA fanlisting — 2000s-inspired, side-art edition.
   Owner-provided artwork; plain HTML/CSS; no external fonts or scripts. */
:root {
  color-scheme: dark;
  --outside: #050707;
  --page: #050707;
  --panel: #0e1718;
  --panel-dark: #090f10;
  --border: #293839;
  --border-soft: #1e2b2c;
  --ink: #e4e8e6;
  --muted: #9caeaa;
  --subtle: #78908d;
  --teal: #99c7bf;
  --red: #b95c56;
}
*, *::before, *::after {box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%;}
body {
  margin: 0;
  background: #050707;
  color: var(--ink);
  font: 14px/1.75 Arial, Helvetica, sans-serif;
}
a {color: var(--teal); text-underline-offset: 3px; text-decoration-color: #668982;}
a:hover {color: #e4f1ec; text-decoration-color: currentColor;}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {outline: 2px solid #d68b7e; outline-offset: 3px;}
img {max-width: 100%; height: auto;}
strong, b {font-weight: 700;}
.skip-link {position:absolute;left:10px;top:-60px;background:#e5eeee;color:#081011;padding:8px 12px;z-index:20;}
.skip-link:focus {top:8px;}
#container {width:min(1080px,calc(100% - 42px));margin:28px auto 42px;}
.site-composition {display:grid;grid-template-columns:minmax(0,43%) minmax(0,57%);align-items:stretch;}
.art-panel {position:relative;min-width:0;min-height:820px;overflow:hidden;background:#050707;isolation:isolate;}
.art-panel img {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  display:block; height:800px; width:auto; max-width:none;
  filter: saturate(.88) contrast(1.05);
}
/* The picture melts into the same black as the rest of the page. */
.art-panel::after {
  content:"";position:absolute;top:0;left:0;right:0;height:800px;pointer-events:none;
  /* Match the fixed picture height, not the varying content column height. */
  background:
    linear-gradient(to right,#050707 0%,transparent 12%,transparent 73%,#050707 100%),
    linear-gradient(to bottom,#050707 0%,transparent 10%,transparent 62%,#050707 97%);
}
.site-column {min-width:0;background:#050707;padding:12px 11px 0 0;}
.site-header {padding:0 29px 0;border-bottom:1px solid #243334;}
.overline {display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#678680;}
.brand {display:flex;align-items:center;justify-content:space-between;gap:17px;margin:12px 0 22px;text-decoration:none;}
.brand img {display:block;width:226px;max-width:57%;height:auto;mix-blend-mode:screen;}
.brand span {display:block;text-align:right;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.21em;color:#a1b9b3;}
.site-layout {min-width:0;}
.sidebar {padding:12px 29px 0;border-bottom:1px solid #243334;}
#menu {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;}
#menu a {
  display:flex;align-items:center;justify-content:flex-start;gap:8px;
  min-width:0;min-height:41px;padding:9px 5px 9px 0;
  text-decoration:none;text-transform:uppercase;color:#abbdb7;
  font-size:10px;font-weight:700;line-height:1.45;letter-spacing:.06em;
}
#menu a::before {content:"";flex:0 0 4px;width:4px;height:4px;background:#78504e;}
#menu a:hover,#menu a:focus-visible {color:#f6faf6;}
#menu a:hover::before,#menu a:focus-visible::before {background:#c1685f;}
#content {padding:31px 30px 31px;min-width:0;min-height:485px;color:#d0d9d5;}
#content > :first-child {margin-top:0;}
.eyebrow {color:#80a29c;text-transform:uppercase;font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.16em;}
#content h1 {
  margin: 12px 0 19px; color: #f3f5f1; font: 400 32px/1.18 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
}
#content h1::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 23px; height: 2px; margin: 0 15px 7px 0; background: var(--red);
}
#content h2 {margin: 0 0 15px; font: 400 18px/1.35 Arial, Helvetica, sans-serif; color: #eef4ef; letter-spacing: .035em;}
#content h3 {color: #e7efec;}
#content p {margin: 0 0 16px; overflow-wrap: break-word;}
#content .lead {font: 400 19px/1.55 Georgia,'Times New Roman',serif; color: #b5d3cc; margin: 0 0 20px;}
#content .small-copy, #content .home-footnote {color: #8da6a1; font-size: 12px; line-height: 1.7;}
#content .home-footnote {margin-top: 25px;}
.actions {display: flex; flex-wrap: wrap; gap: 11px; margin: 25px 0 30px;}
.button {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 40px; padding: 10px 15px; border: 1px solid #556a68;
  color: #d4e8e2; font-size: 11px; line-height: 1.4; font-weight: 700;
  letter-spacing: .06em; text-decoration: none;
}
.button:hover {color: #fff; background: #1c3233; border-color: #92b7b1;}
.button-primary {color: #fff; background: #742e2d; border-color: #8c4240;}
.button-primary:hover {background:#954543; border-color:#bb6b63;}
.stats-panel {background: #101a1b; border: 1px solid #304043; padding: 21px 23px 22px; margin-top: 29px;}
.stats-panel h2 {font-size: 14px; text-transform: uppercase; font-weight: 700; letter-spacing: .12em; margin-bottom: 17px;}
.stats-panel h2::before {content:'';display:inline-block;vertical-align:middle;width:17px;height:2px;background:var(--red);margin:0 12px 5px 0;}
.stats-panel {font-size:13px; color:#c2d2cd; line-height:1.75;}
.stats-panel :is(h1,h2,h3,.head):not(:first-child),
#content .stats-panel :is(h1,h2,h3,.head):not(:first-child) {font-size: 13px; line-height:1.55; font-weight:700; margin: 13px 0 8px; letter-spacing:0;}
.stats-panel p {margin: 0 0 8px !important;}
.subsection {border-top:1px solid #2d4041; margin-top:33px; padding-top:25px;}
.details-list {margin: 9px 0 24px; border-top: 1px solid #2d3c3d;}
.details-list > div {display:grid;grid-template-columns:42% minmax(0,1fr);gap:13px; padding:9px 0;border-bottom:1px solid #263638;}
.details-list dt {color: #93aca7;}
.details-list dd {margin: 0; color: #e2e8e4;}
.rules-content ul {padding-left: 20px;}
.rules-content li {padding: 0 0 8px 4px;}
/* Live Enthusiast and CodeSort forms. */
#content form {max-width: 100%;}
#content label, #content .label {
  display: block; float: none !important; clear: both; width: auto !important;
  margin: 12px 0 5px; font: 700 12px/1.6 Arial,Helvetica,sans-serif; color: #b7d0c9;
}
#content .textbox {display:block; float:none!important; clear:both; width:auto!important; margin: 0 0 13px;}
#content input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=hidden]):not([type=image]),
#content select, #content textarea {
  display: inline-block; min-height: 41px; width: min(100%, 440px); max-width: 100%;
  padding: 10px 12px; border: 1px solid #405457; border-radius: 0;
  background: #0a1213; color: #e6efeb; font: 14px/1.4 Arial, Helvetica, sans-serif;
}
#content input::placeholder {color: #708984; opacity: 1;}
#content select {cursor: pointer;}
#content textarea {min-height: 110px; width: min(100%, 500px);}
#content input[type=checkbox], #content input[type=radio] {accent-color:#a65c56; width: 16px; height: 16px; vertical-align: middle;}
#content input[type=submit], #content input[type=button], #content button {
  display:inline-block; width: auto; max-width:100%; min-height:41px;
  padding: 10px 15px; border:1px solid #914a45; border-radius:0;
  background:#763533; color:#f5eceb; font: 700 12px/1.3 Arial,Helvetica,sans-serif; cursor:pointer;
}
#content input[type=reset] {
  display:inline-block; width:auto; max-width:100%; min-height:41px; margin:0 0 0 8px;
  padding: 10px 15px; border:1px solid #48605e; border-radius:0;
  background:transparent; color:#b7d1cb; font:700 12px/1.3 Arial,Helvetica,sans-serif; cursor:pointer;
}
#content button[type=reset] {
  margin-left:8px; border-color:#48605e; background:transparent;
  color:#b7d1cb; font-weight:700;
}
#content button[type=reset]:hover:not(:disabled) {background:#152122;}
#content input[type=submit]:hover, #content input[type=button]:hover, #content button:hover:not(:disabled) {background:#95514a; border-color:#ad625a;}
#content input[type=reset]:hover:not(:disabled) {background:#152122;}
#content :disabled {cursor: default !important; opacity:.65;}
#content .checkbox-label {font-weight: 400; color:#bfcbc8; margin:15px 0;}
#content .optional {font-weight:400;color:#7d9e97;}
#content .form-actions {margin-top: 16px;}
#content table {max-width:100%; border-collapse:collapse;}
#content td, #content th {overflow-wrap:anywhere; padding: 6px 10px 6px 0; vertical-align: top;}
#content .error, #content .errors {color:#ec8f81;}
/* The real script's markup may use floats and fixed widths from its own CSS.
   Keep the site's form layout predictable in both its old and new templates. */
#content .show_join_form p, #content .show_update_form p,
#content .show_delete_form p, #content .show_lostpass_form p {clear:both; max-width:100%;}
#content .show_join_form p > span:first-child,
#content .show_update_form p > span:first-child {
  float: none !important; display: block; width: auto !important;
  color: #b7d0c9; font-size: 12px; font-weight:700; margin-bottom:5px;
}
#content .show_join_submit, #content .show_update_submit {clear:both;}
/* Member cards: two columns on roomy screens, one on narrow phones. */
.member-tools {margin: 18px 0 19px;}
.member-tools label {margin:0 0 6px !important;}
.member-tools select {min-width: 185px; width:auto!important;}
.member-output {max-width:100%;}
.soma-member-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 22px;}
.soma-member {
  display:flex;flex-direction:column; min-width:0; border:1px solid #2f4244;
  background:#101b1c; padding:18px 18px 16px; overflow-wrap:anywhere;
}
.soma-member__name {display:block;font:400 18px/1.3 Arial,Helvetica,sans-serif; color:#f0f3f0; margin-bottom:5px;}
.soma-member__country {display:block;text-transform:uppercase;font-size:10px;letter-spacing:.09em;color:#95ada7;}
.soma-member__identity {margin-bottom:18px;}
.soma-member__links {margin-top:auto;display:flex;gap:8px;}
.soma-member__contact {display:flex;min-width:0;flex:1;}
.soma-member__contact > a, .soma-member__contact > span, .soma-member__contact.is-off {
  display:flex;align-items:center;justify-content:center;min-height:31px;width:100%;max-width:100%;
  padding:5px; border:1px solid #41605c; text-align:center; color:#b5d5cb;
  font-size:11px;font-weight:700;text-decoration:none;line-height:1.35;
}
.soma-member__contact a:hover {background:#233d3b;color:#fff;}
.soma-member__contact .show_members_no_email,
.soma-member__contact .show_members_no_website,
.soma-member__contact.is-off {background: #0d1516; border:1px dashed #344847;color:#76928b;font-weight:400;}
.soma-member__contact .show_members_no_email *,
.soma-member__contact .show_members_no_website * {color:inherit;}
.member-output .member:not(.soma-member) {border:1px solid var(--border);padding:16px;margin:10px 0;background:var(--panel);}
/* CodeSort, buttons and affiliation images. */
.starter-codes {display:flex; flex-wrap:wrap; gap:15px; align-items:center; margin:22px 0 18px;}
.starter-codes img {display:block; height:auto; max-width:100%; border:1px solid #374744;}
.codes-area, .affiliates-content {max-width:100%; overflow-wrap:anywhere;}
.codes-area img,.affiliates-content img {display:inline-block;max-width:100%;height:auto;vertical-align:middle;}
.codes-area a,.affiliates-content a {display:inline-block;max-width:100%;}
.affiliate {display:inline-block;vertical-align:top;margin:0 9px 9px 0;padding:4px;border:1px solid #304b4b;}
code {color:#c9ded7; font-size:.92em;overflow-wrap:anywhere;}

.site-footer {margin:0 29px;padding:18px 0 27px;border-top:1px solid #263739;text-align:left;color:#77928b;font:400 10px/1.7 Arial,Helvetica,sans-serif;letter-spacing:.02em;}
.site-footer p {margin:0;}
.site-footer a {color:#9cbab0;text-decoration-color:#66867c;}
@media (max-width: 950px) and (min-width: 771px) {
  #container {width:calc(100% - 26px);margin:15px auto 30px;}
  .site-composition {grid-template-columns:minmax(0,40%) minmax(0,60%);}
  .art-panel img {height:735px;}
  .art-panel::after {height:735px;}
  .site-header {padding:0 19px;}
  .sidebar {padding:10px 19px 0;}
  #content {padding:28px 20px 32px;}
  .site-footer {margin:0 19px;}
  #menu a {font-size:9px;letter-spacing:0;}
  .brand span {font-size:9px;}
  .soma-member-grid {grid-template-columns:1fr;}
}
@media (max-width: 770px) {
  #container {width:min(650px,calc(100% - 24px));margin:13px auto 32px;}
  .site-composition {display:block;}
  .art-panel {height:260px;min-height:0;}
  .art-panel img {left:50%;top:-13px;transform:translateX(-50%);width:100%;height:auto;max-width:none;}
  .art-panel::after {
    height:100%;
    background:linear-gradient(to right,#050707 0%,transparent 9%,transparent 91%,#050707 100%),
    linear-gradient(to bottom,transparent 0%,transparent 40%,#050707 100%);
  }
  .site-column {padding:0;}
  .site-header {padding:0 26px;}
  .sidebar {padding:9px 26px 0;}
  #content {padding:29px 26px 38px;min-height:0;}
  .site-footer {margin:0 26px;padding-bottom:21px;}
  .soma-member-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px) {
  #container {width:calc(100% - 12px);margin:6px auto 20px;}
  .art-panel {height:clamp(178px,51vw,245px);}
  .site-header {padding:0 19px;}
  .overline {font-size:9px;letter-spacing:.06em;}
  .brand {margin:4px 0 12px;gap:8px;}
  .brand img {width:190px;max-width:56%;}
  .brand span {font-size:9px;letter-spacing:.13em;}
  .sidebar {padding:5px 19px 0;}
  #menu {grid-template-columns:repeat(2,minmax(0,1fr));}
  #menu a {min-height:44px;padding:7px 5px 7px 0;font-size:11px;letter-spacing:.03em;gap:8px;border-bottom:1px solid #172323;}
  #menu a::before {width:3px;height:3px;flex-basis:3px;}
  #content {padding:27px 19px 34px;}
  #content h1 {font-size:28px;}
  #content .lead {font-size:18px;}
  .soma-member-grid {grid-template-columns:1fr;}
  .details-list > div {grid-template-columns:1fr;gap:1px;}
  .site-footer {margin:0 19px;font-size:10px;}
}
@media (max-width:360px) {
  #container {width:calc(100% - 8px);margin:4px auto 16px;}
  .site-header {padding:0 14px;}
  .overline {font-size:8px;letter-spacing:0;}
  .brand img {width:160px;}
  .brand span {font-size:8px;}
  .sidebar {padding:5px 14px 0;}
  #menu a {font-size:10px;}
  #content {padding:25px 15px 32px;}
  .soma-member {padding:15px;}
  .stats-panel {padding:16px;}
  .form-actions {display:flex;flex-wrap:wrap;gap:8px;}
  #content input[type=reset] {margin:0;}
  .site-footer {margin:0 14px;}
}
@media (prefers-reduced-motion:reduce) {#menu a {transition:none;}}