@import url(https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap);

/* =========================================================
   SHADOW OF THE SHATTERED / MYBB OVERRIDES
   Clean consolidated version
   Replace your custom override layer with this
   ========================================================= */

:root {
  --sos-ink: #050B0F;
  --sos-deep: #091317;
  --sos-panel: #0f171b;
  --sos-panel-2: #151f24;
  --sos-panel-3: #2F3638;
  --sos-brass: #A37C54;
  --sos-brass-soft: rgba(163, 124, 84, 0.22);
  --sos-brass-strong: rgba(163, 124, 84, 0.45);
  --sos-text: #969ca5;
  --sos-text-soft: #7f8790;
  --sos-light: #d4d6d6;
  --sos-link: #d8c0a6;
  --sos-link-hover: #f1dfc8;
  --sos-border: rgba(163, 124, 84, 0.22);
  --sos-shadow: 0 0 0 1px rgba(163, 124, 84, 0.16), 0 10px 30px rgba(0,0,0,0.35);
  --sos-font: "IM Fell English", Georgia, serif;
  --sos-radius: 4px;

  --sos-site-width: 1000px;
  --sos-nav-height: 72px;
  --sos-sidebar-width: 300px;

  --sos-page-bg: url(https://i.imgur.com/JxTdugo.jpeg);
  --sos-welcome-bg: url(https://i.imgur.com/jd9Pxwk.jpeg);
  --sos-post-top-bg: url(https://i.imgur.com/jd9Pxwk.jpeg);

  --sos-post-side-width: 300px;
  --sos-post-portrait-width: 200px;
  --sos-post-portrait-height: 400px;
}

/* =========================================================
   BASE
   ========================================================= */

html,
body {
  width: 100%;
  min-width: var(--sos-site-width);
  margin: 0;
  padding: 0;
  background-color: #060E11 !important;
  background-image: var(--sos-page-bg) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-position: center top !important;
  background-size: var(--sos-site-width) auto !important;
  color: var(--sos-text) !important;
  font-family: var(--sos-font) !important;
  letter-spacing: 0.04em;
  overflow-x: auto !important;
}

body {
  line-height: 1.45;
  padding-top: var(--sos-nav-height) !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

#container,
#content,
#main-content,
.sos-main,
.sos-cotf-shell {
  background: transparent !important;
  color: var(--sos-text) !important;
}

.wrapper,
.container-md,
#container,
#content,
#main-content,
.sos-main,
.sos-cotf-shell,
#panel .upper .wrapper,
.menuwrapper .wrapper,
.sos-notices,
.sos-footer__inner,
.welcome,
#logobanner,
.sos-post {
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#header,
#panel,
.menuwrapper,
#footer {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   LINKS
   ========================================================= */

a,
a:link,
a:visited {
  color: var(--sos-link) !important;
  text-decoration: none !important;
  transition: color .2s ease, text-shadow .2s ease;
}

a:hover,
a:focus,
a:active {
  color: var(--sos-link-hover) !important;
  text-decoration: none !important;
  text-shadow: 0 0 6px rgba(241, 223, 200, 0.25);
}

/* =========================================================
   GLOBAL TABLE / FORM / BUTTON LANGUAGE
   ========================================================= */

.tborder {
  background: var(--sos-deep) !important;
  border: 1px solid var(--sos-border) !important;
  border-radius: var(--sos-radius) !important;
  box-shadow: var(--sos-shadow);
}

.thead {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border-bottom: 1px solid var(--sos-brass-strong) !important;
}

.thead a,
.thead strong {
  color: var(--sos-light) !important;
  font-weight: normal !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tcat {
  background: var(--sos-panel) !important;
  color: var(--sos-brass) !important;
  border-top: 1px solid var(--sos-border) !important;
  border-bottom: 1px solid var(--sos-border) !important;
}

.tcat a {
  color: var(--sos-brass) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.trow1,
.trow2 {
  color: var(--sos-text) !important;
  border-top: 1px solid rgba(163,124,84,0.10) !important;
  border-bottom: 1px solid rgba(163,124,84,0.10) !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

.trow1 {
  background: var(--sos-deep) !important;
}

.trow2 {
  background: var(--sos-panel) !important;
}

.trow_shaded {
  background: rgba(163,124,84,0.08) !important;
  color: var(--sos-light) !important;
}

.tfoot {
  background: var(--sos-panel-3) !important;
  color: var(--sos-text) !important;
  border-top: 1px solid var(--sos-border) !important;
}

.tfoot a {
  color: var(--sos-light) !important;
}

.button,
a.button,
input.button,
button,
input[type="submit"],
input[type="button"] {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-brass-strong) !important;
  border-radius: var(--sos-radius) !important;
  font-family: var(--sos-font) !important;
  font-size: 1rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none !important;
}

.button:hover,
a.button:hover,
input.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: #3a4346 !important;
  color: #fff5ea !important;
  border-color: rgba(163,124,84,0.75) !important;
}

.button:focus,
a.button:focus,
input.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(163,124,84,0.18) !important;
}

input.textbox,
textarea,
select,
.editor_control_bar,
.codebuttons,
.smilie_insert,
.forminput,
.postbit_buttons > a,
.form-control,
.form-select {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-border) !important;
  font-family: var(--sos-font) !important;
}

input.textbox:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  border-color: rgba(163,124,84,0.75) !important;
  box-shadow: 0 0 0 3px rgba(163,124,84,0.15) !important;
  outline: none !important;
}

option {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
}

fieldset {
  border: 1px solid var(--sos-border) !important;
  background: var(--sos-deep) !important;
}

legend {
  color: var(--sos-brass) !important;
  font-family: var(--sos-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

blockquote {
  background: var(--sos-panel) !important;
  border: 1px solid var(--sos-border) !important;
  border-left: 3px solid var(--sos-brass) !important;
  border-radius: var(--sos-radius) !important;
  color: var(--sos-text) !important;
  padding: 15px !important;
  margin: 12px 0 !important;
}

blockquote cite {
  display: block;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(163,124,84,0.12) !important;
  color: var(--sos-brass) !important;
  font-style: italic;
}

code,
.codeblock,
.pre-bordered {
  background: #10171b !important;
  border: 1px solid var(--sos-border) !important;
  color: #d8d8d8 !important;
  border-radius: var(--sos-radius) !important;
}

.codeblock .title {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border-bottom: 1px solid var(--sos-border) !important;
}

.pagination {
  color: var(--sos-text) !important;
}

.pagination a,
.pagination span {
  background: var(--sos-panel) !important;
  color: var(--sos-text) !important;
  border: 1px solid var(--sos-border) !important;
  border-radius: 3px !important;
}

.pagination a:hover {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border-color: var(--sos-brass-strong) !important;
}

.pagination .pagination_current,
.pagination .current {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border-color: var(--sos-brass-strong) !important;
}

.error {
  background: rgba(115, 34, 34, 0.35) !important;
  border: 1px solid rgba(183, 92, 92, 0.45) !important;
  color: #f0d0d0 !important;
}

.success {
  background: rgba(44, 63, 48, 0.35) !important;
  border: 1px solid rgba(102, 142, 111, 0.45) !important;
  color: #d7e8d8 !important;
}

.alert {
  background: rgba(163,124,84,0.10) !important;
  border: 1px solid var(--sos-brass-soft) !important;
  color: var(--sos-light) !important;
}

.pm_alert,
.red_alert {
  background: rgba(163,124,84,0.14) !important;
  border: 1px solid var(--sos-brass-strong) !important;
  color: var(--sos-light) !important;
}

.panel,
.pm_folder,
.pm_message,
.stat,
.stats,
.forumbit_post,
.forumbit_manage,
.subforum_small,
.attachbox,
.buddy_status,
.expcolimage,
.popup_menu,
.popup_item_container,
.popup_item,
.popup_menu .popup_item {
  background: var(--sos-deep) !important;
  color: var(--sos-text) !important;
  border-color: var(--sos-border) !important;
}

.popup_menu {
  border: 1px solid var(--sos-border) !important;
  box-shadow: var(--sos-shadow) !important;
}

.popup_item:hover,
.popup_menu .popup_item:hover {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
}

table {
  color: var(--sos-text) !important;
}

td {
  color: inherit !important;
}

hr {
  border: 0 !important;
  border-top: 1px solid var(--sos-border) !important;
}

img {
  max-width: 100%;
  height: auto;
}

.card,
.modal,
.dropdown-menu,
.bg-primary,
.bg-light,
.bg-white,
.nav-tabs .nav-link,
.btn-primary,
.btn-secondary,
.editor,
.editor_row {
  background-color: var(--sos-panel) !important;
  color: var(--sos-text) !important;
  border-color: var(--sos-border) !important;
}

.btn-primary,
.btn-secondary {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
}

.nav-tabs .nav-link.active {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border-color: var(--sos-border) !important;
}

::selection {
  background: rgba(163,124,84,0.25);
  color: #fffaf4;
}

/* =========================================================
   HEADER / ACCOUNT BAR / FIXED NAV / BANNER
   ========================================================= */

#header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: 18px;
  padding-top: var(--sos-nav-height) !important;
}

#panel,
#panel .upper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 4;
}

#panel {
  margin-top: 12px;
}

#panel .upper {
  padding: 10px 14px !important;
}

.sos-topbar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.sos-accountbar-shell {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.sos-accountbar {
  width: fit-content !important;
  max-width: var(--sos-site-width) !important;
  margin: 0 auto !important;
  padding: 12px 14px !important;
  background: var(--sos-deep);
  border: 1px solid var(--sos-border);
  box-shadow: var(--sos-shadow);
  border-radius: var(--sos-radius);
}

.sos-accountbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  gap: 10px 12px !important;
}

.sos-accountbar__hello {
  margin: 0 !important;
  white-space: nowrap;
  color: var(--sos-text);
  font-family: var(--sos-font);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.sos-accountbar__hello a {
  color: var(--sos-brass) !important;
}

.sos-accountbar__hello a:hover {
  color: var(--sos-link-hover) !important;
}

.sos-accountbar__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  gap: 8px !important;
}

.sos-accountbar__links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sos-accountbar__links a {
  display: inline-block;
  background: var(--sos-panel-3);
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-brass-strong);
  border-radius: 3px;
  padding: 5px 10px !important;
  font-family: var(--sos-font);
  font-size: 0.9rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1.2;
}

.sos-accountbar__links a:hover,
.sos-accountbar__links a:focus {
  background: #3a4346;
  color: #fff5ea !important;
  border-color: rgba(163,124,84,0.78);
  text-shadow: none;
}

.sos-accountbar__links a.pm-button-single {
  white-space: nowrap !important;
}

/* full-width fixed nav */
.menuwrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 999999 !important;
  background: rgba(5,11,15,.97) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--sos-border) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.35) !important;
}

.menuwrapper .wrapper {
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.menuwrapper .menu,
ul.menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 42px !important;
  min-height: var(--sos-nav-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.menuwrapper .menu li {
  float: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.menuwrapper .menu a,
ul.menu li a {
  display: block !important;
  padding: 22px 0 !important;
  color: var(--sos-text) !important;
  font-family: var(--sos-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.menuwrapper .menu a:hover,
ul.menu li a:hover {
  color: var(--sos-light) !important;
}

/* banner */
#logobanner {
  position: relative !important;
  min-height: 550px !important;
  margin: 0 auto !important;
  padding: 36px 24px 26px !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  z-index: 1 !important;
}

#logobanner .logotitle {
  position: absolute !important;
  top: 150px !important;
  left: 23% !important;
  width: auto !important;
  margin: 0 !important;
  text-align: left !important;
  z-index: 5 !important;
}

#logobanner .plotheader {
  position: absolute !important;
  top: 222px !important;
  left: 23% !important;
  width: auto !important;
  margin: 0 !important;
  text-align: left !important;
  z-index: 5 !important;
  color: var(--sos-brass);
  font-family: var(--sos-font);
  font-size: clamp(1.1rem, 1.5vw, 1.7rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#logobanner .logotitle a,
#logobanner .logotitle {
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  font-size: clamp(2.8rem, 4.2vw, 5rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.06em;
  text-transform: none !important;
  text-shadow: 0 0 18px rgba(0,0,0,.45);
}

.sos-notices {
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
  margin: 0 auto 18px !important;
}

/* =========================================================
   INDEX / CONTENT SHELL
   ========================================================= */

.sos-cotf-shell,
#container {
  display: grid !important;
  grid-template-columns: var(--sos-sidebar-width) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#sidebar-collapse,
.sos-sidebar,
#container > .float_left {
  float: none !important;
  width: var(--sos-sidebar-width) !important;
  min-width: var(--sos-sidebar-width) !important;
  max-width: var(--sos-sidebar-width) !important;
  margin: 0 !important;
}

#main-content,
.sos-main,
#container > .float_right {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#content {
  width: 100% !important;
  min-width: 0 !important;
}

#main-content .navigation,
.sos-main .navigation {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 14px !important;
}

.sos-sidebar-box {
  margin-bottom: 14px;
  overflow: hidden;
}

.sidebarstyle,
.sidelinks,
.sos-season-box {
  line-height: 1.7;
}

.trow1forum {
  background: var(--sos-deep);
  color: var(--sos-text);
  border-top: 1px solid rgba(163,124,84,.10);
  border-bottom: 1px solid rgba(163,124,84,.10);
  padding: 14px 16px;
}

.sidelinksmenu {
  display: grid;
  gap: 8px;
}

.sidelinksmenu a {
  display: block;
  background: var(--sos-panel);
  border: 1px solid var(--sos-border);
  border-radius: 3px;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sos-light) !important;
  text-shadow: none !important;
}

.sidelinksmenu a:hover {
  background: var(--sos-panel-3);
  color: #fff5ea !important;
}

.sos-season-box strong {
  display: block;
  margin-bottom: 6px;
  color: var(--sos-brass);
  letter-spacing: .08em;
  text-transform: uppercase;
}

#main-content .tborder {
  margin-bottom: 14px;
}

#main-content .tcat {
  padding: 10px 14px;
}

#main-content .expcolimage {
  float: right;
  margin-left: 8px;
}

#boards {
  background: var(--sos-panel);
  border: 1px solid var(--sos-border);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 10px 0 0;
}

.descripfade {
  color: var(--sos-text);
  line-height: 1.75;
  max-height: 130px;
  overflow: auto;
  text-align: justify;
}

.trow1forum .lastpost_bar,
.lastpost_bar {
  text-align: right;
}

.lastpost_bar .smalltext {
  display: inline-block;
  text-align: right;
  line-height: 1.55;
}

.subforums {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
}

.subforums li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.subforums a {
  display: inline-block;
  padding: 4px 10px;
  background: var(--sos-panel-2);
  border: 1px solid var(--sos-border);
  border-radius: 999px;
  font-size: .92rem;
  text-shadow: none !important;
}

.sos-board-activity .trow1 {
  padding: 18px !important;
}

/* =========================================================
   WELCOME TABLE
   Compact version
   ========================================================= */

.welcome {
  width: var(--sos-site-width);
  min-width: var(--sos-site-width);
  max-width: var(--sos-site-width);
  margin: 0 auto 28px;
  padding: 12px;
  padding-top: 0;
  background: var(--sos-deep);
  border: 1px solid var(--sos-border);
  box-shadow: 0 0 50px rgba(0,0,0,.45);
  border-radius: 320px 320px 0 0;
  box-sizing: border-box;
}

.welcome > .fade-scroll {
  opacity: 1;
}

.welcome__arch {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  margin-bottom: 10px;
  padding: 26px 18px 18px;
  border: 1px solid rgba(163,124,84,.45);
  border-radius: 520px 520px 0 0;
  text-align: center;
  background:
    linear-gradient(to bottom, rgba(7,19,23,.28), rgba(7,19,23,.42)),
    var(--sos-welcome-bg) center center / cover no-repeat;
	background-attachment: fixed;
  box-shadow: inset 0 0 14px rgba(0,0,0,.35);
}

.welcome__arch-fill {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.welcome__arch-hello {
  color: var(--sos-brass);
  font-family: var(--sos-font);
  font-size: 1.05rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.welcome__arch-title {
  color: #E6E3D6;
  font-family: var(--sos-font);
  font-size: 2.4rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0,0,0,.45);
}

.welcome__row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.welcome__content {
  background:
    linear-gradient(to bottom, rgba(5,11,15,.72), rgba(5,11,15,.82)),
    var(--sos-welcome-bg) center top / cover no-repeat;
	background-attachment: fixed;
  border: 1px solid var(--sos-border);
  box-shadow: var(--sos-shadow);
  border-radius: 5px;
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  box-sizing: border-box;
}

.welcome__content--intro,
.welcome__content--staff,
.welcome__content--updates,
.welcome__content--links {
  flex: 0 0 calc(50% - 5px);
  max-width: calc(50% - 5px);
}

.welcome__title {
  width: 100%;
  margin-bottom: 6px;
  padding: 9px 10px 8px;
  background: var(--sos-deep);
  border: 1px solid var(--sos-border);
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
}

.welcome__title p {
  margin: 0;
  color: var(--sos-brass);
  font-family: var(--sos-font);
  font-size: 1.4rem;
  font-style: italic;
}

.welcome__text,
.welcome__weather,
.welcome__links {
  width: 100%;
  background: var(--sos-deep);
  border: 1px solid var(--sos-border);
  border-radius: 5px;
  box-sizing: border-box;
}

.welcome__text {
  padding: 10px 14px;
}

.welcome__text-inner {
  max-height: 150px;
  overflow: auto;
  padding-right: 8px;
}

.welcome__text-inner p {
  margin: 0 0 10px;
  line-height: 1.7;
  text-align: justify;
}

.welcome__weather {
  margin-top: 8px;
  padding: 12px 14px;
}

.welcome__weather p {
  margin: 0;
  line-height: 1.7;
}

.welcome__weather span {
  font-style: italic;
}

.welcome__links {
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}

.welcome__links a {
  flex: 0 0 calc(50% - 4px);
  display: block;
  padding: 9px;
  background: var(--sos-panel-3);
  border: 1px solid var(--sos-border);
  color: var(--sos-text) !important;
  text-align: center;
  text-transform: uppercase;
  font-size: .88rem;
  font-style: normal;
}

.welcome__links a:hover {
  color: var(--sos-light) !important;
  text-shadow: none !important;
}

.welcome__content--staff {
  justify-content: center;
  gap: 12px;
}

.hover-avatar {
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 200px;
  border: 1px solid rgba(163,124,84,.56);
  border-radius: 100px 100px 0 0;
  background: var(--sos-deep);
  display: block;
}

.hover-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: .3s ease;
}

.hover-avatar span {
  position: absolute;
  inset: auto 0 12px 0;
  z-index: 2;
  opacity: 0;
  padding: 0 8px;
  color: var(--sos-light);
  text-align: center;
  transition: .3s ease;
}

.hover-avatar:hover span {
  opacity: 1;
}

.hover-avatar:hover img {
  opacity: .35;
  transform: scale(1.08);
  filter: blur(2px);
}

/* =========================================================
   USER CP
   ========================================================= */

.usercp_nav,
table.usercp_nav,
.usercp table,
#content table.tborder {
  border-radius: 4px;
  overflow: hidden;
}

.usercp_nav,
table.usercp_nav {
  width: 260px;
  background: #091317 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
}

.usercp_nav .thead,
.usercp_nav .tcat,
table.usercp_nav .thead,
table.usercp_nav .tcat {
  background: #2F3638 !important;
  color: #d4d6d6 !important;
  border-bottom: 1px solid rgba(163,124,84,0.45) !important;
}

.usercp_nav .thead strong,
.usercp_nav .tcat strong,
table.usercp_nav .thead strong,
table.usercp_nav .tcat strong {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.usercp_nav .trow1,
.usercp_nav .trow2,
table.usercp_nav .trow1,
table.usercp_nav .trow2 {
  background: #0f171b !important;
  padding: 10px !important;
  border-top: 1px solid rgba(163,124,84,0.10) !important;
  border-bottom: 1px solid rgba(163,124,84,0.10) !important;
}

.usercp_nav a,
table.usercp_nav a,
.usercp_nav .usercp_nav_item,
table.usercp_nav .usercp_nav_item,
a.usercp_nav_item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #151f24 !important;
  color: #d4d6d6 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  border-radius: 3px;
  padding: 9px 12px !important;
  margin: 0 0 6px 0 !important;
  text-decoration: none !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  float: none !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.usercp_nav a:last-child,
table.usercp_nav a:last-child,
.usercp_nav .usercp_nav_item:last-child,
table.usercp_nav .usercp_nav_item:last-child {
  margin-bottom: 0 !important;
}

.usercp_nav a:hover,
table.usercp_nav a:hover,
.usercp_nav .usercp_nav_item:hover,
table.usercp_nav .usercp_nav_item:hover,
a.usercp_nav_item:hover {
  background: #2F3638 !important;
  color: #f1dfc8 !important;
  border-color: rgba(163,124,84,0.50) !important;
  text-shadow: none !important;
}

.usercp_nav .usercp_nav_current,
table.usercp_nav .usercp_nav_current,
.usercp_nav a.usercp_nav_current,
table.usercp_nav a.usercp_nav_current {
  background: #2F3638 !important;
  color: #f1dfc8 !important;
  border-color: rgba(163,124,84,0.62) !important;
  box-shadow: inset 0 0 0 1px rgba(163,124,84,0.14);
}

#content .tborder {
  background: #091317 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
}

#content .thead {
  background: #2F3638 !important;
  color: #d4d6d6 !important;
  border-bottom: 1px solid rgba(163,124,84,0.45) !important;
}

#content .thead strong,
#content .thead a {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#content .trow1 {
  background: #091317 !important;
  color: #969ca5 !important;
  border-top: 1px solid rgba(163,124,84,0.10) !important;
  border-bottom: 1px solid rgba(163,124,84,0.10) !important;
}

#content .trow2 {
  background: #0f171b !important;
  color: #969ca5 !important;
  border-top: 1px solid rgba(163,124,84,0.10) !important;
  border-bottom: 1px solid rgba(163,124,84,0.10) !important;
}

#content .tcat {
  background: #151f24 !important;
  color: #A37C54 !important;
  border-top: 1px solid rgba(163,124,84,0.22) !important;
  border-bottom: 1px solid rgba(163,124,84,0.22) !important;
}

#content .tcat strong {
  color: #A37C54 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#content .tfoot {
  background: #151f24 !important;
  border-top: 1px solid rgba(163,124,84,0.22) !important;
}

.usercp_container,
.usercp_content {
  background: transparent !important;
}

.usercp_content .tborder {
  margin-bottom: 16px;
}

#content input.textbox {
  min-height: 36px;
}

#content textarea {
  min-height: 140px;
  resize: vertical;
}

.sos-ucp-layout {
  align-items: flex-start;
}

.sos-ucp-sidebar,
.sos-ucp-main {
  min-width: 0;
}

.sos-ucp-main > .tborder,
.sos-ucp-main form > .tborder,
.sos-ucp-main table.tborder {
  width: 100% !important;
  margin-bottom: 16px;
}

.sos-ucp-main > br,
.sos-ucp-main form > br {
  display: none;
}

.sos-ucp-main img.rounded-circle {
  display: block;
  width: 120px !important;
  height: 120px !important;
  object-fit: cover;
  margin: 0 0 16px 0;
  border: 2px solid rgba(163,124,84,0.45);
  background: #091317;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
}

.sos-ucp-main .alert.bg-white {
  background: #0f171b !important;
  color: #969ca5 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  padding: 12px !important;
}

.sos-ucp-main .largetext,
.sos-ucp-main .largetext a {
  color: #A37C54 !important;
  font-family: "IM Fell English", Georgia, serif !important;
}

.sos-ucp-main strong {
  color: #d4d6d6;
}

.sos-ucp-main textarea.usercp_notepad {
  width: 100% !important;
  min-height: 180px;
}

/* =========================================================
   SHOWTHREAD HEADER / CONTROLS
   ========================================================= */

.container-md > .card.catmod,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none > .card.catmod,
.card.shadow-sm.rounded.border-0.p-2.mt-4.mb-4 {
  background: var(--sos-deep) !important;
  border: 1px solid var(--sos-border) !important;
  box-shadow: var(--sos-shadow) !important;
  border-radius: 8px !important;
}

.container-md > .card.catmod p,
.container-md > .card.catmod label,
.container-md > .card.catmod .text-muted,
.card.shadow-sm.rounded.border-0.p-2.mt-4.mb-4,
.card.shadow-sm.rounded.border-0.p-2.mt-4.mb-4 .text-muted {
  color: var(--sos-text) !important;
}

.container-md > .card.catmod p[style*="font-size: 20px"],
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none .card.catmod p[style*="font-size: 20px"] {
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.container-md .card.catmod .btn,
.card.catmod .btn,
#moderator_options .btn,
#inlinemoderation_options .btn {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-brass-strong) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.container-md .card.catmod .btn:hover,
.card.catmod .btn:hover,
#moderator_options .btn:hover,
#inlinemoderation_options .btn:hover {
  background: #3a4346 !important;
  color: #fff5ea !important;
}

.container-md .card.catmod .form-select,
.card.catmod .form-select,
#moderator_options .form-select,
#inlinemoderation_options .form-select {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-border) !important;
}

/* =========================================================
   DESKTOP POSTBIT
   Fixed width. No stacking.
   Portrait locked at 250x400.
   ========================================================= */

.sos-post {
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
  margin: 24px auto !important;
  background: var(--sos-deep) !important;
  border: 1px solid var(--sos-border) !important;
  box-shadow: var(--sos-shadow) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.sos-post__grid {
  display: grid !important;
  grid-template-columns: 450px minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
}

.sos-post__side {
  padding: 12px 14px 14px !important;
  border-right: 1px solid rgba(163,124,84,.18) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.sos-post__portraitwrap {
  margin: 0 !important;
  padding: 12px !important;
  background: transparent !important;
  border: 1px solid rgba(163,124,84,.18) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.sos-post__portrait {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  margin: 0 auto !important;
	height: 400px !important;
}

.sos-post__portrait img {
  display: block !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: var(--sos-post-portrait-width) !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: var(--sos-post-portrait-height) !important;
  object-fit: cover !important;
  object-position: center top !important;
  border: 2px solid rgba(163,124,84,.55) !important;
  border-radius: 150px 150px 0 0 !important;
  background: var(--sos-panel) !important;
}

.sos-post__quote {
  margin: 0 !important;
  padding: 14px 18px !important;
  min-height: 96px !important;
  background: transparent !important;
  border: 1px solid rgba(163,124,84,.18) !important;
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  font-size: .95rem !important;
  font-style: italic !important;
  line-height: 1.35 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.sos-post__quote:empty {
  display: none;
}

.sos-post__main {
  min-width: 0 !important;
  padding: 12px 18px 0 !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(to bottom, rgba(5,11,15,.52), rgba(5,11,15,.72)),
    var(--sos-post-top-bg) center top !important;
	background-attachment: fixed !important;
}

.sos-post__namewrap {
  margin: 0 0 10px !important;
  padding: 0 2px !important;
  text-align: left !important;
}

.sos-post__name {
  display: inline-block !important;
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  font-size: 1.95rem !important;
  font-weight: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
}

.sos-post__bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px !important;
  background: rgba(5,11,15,.28) !important;
  border: 1px solid rgba(163,124,84,.35) !important;
  border-radius: 28px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.sos-post__bar .mp-card {
  background: rgba(5,11,15,.18) !important;
  border: 1px solid rgba(163,124,84,.35) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

.sos-post__bar .mp-card h4 {
  margin: 0 0 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(163,124,84,.35) !important;
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  font-size: 1rem !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.sos-post__bar .mp-card.mp-grid {
  display: grid !important;
  gap: 8px !important;
}

.sos-post__bar .mp-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  background: rgba(5,11,15,.40) !important;
  border: 1px solid rgba(163,124,84,.38) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

.sos-post__bar .mp-pill .label {
  color: var(--sos-brass) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

.sos-post__bar .mp-pill .value {
  color: var(--sos-light) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}

.sos-post__stats {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 10px 8px 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

.sos-statpill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  background: rgba(15,23,27,.72) !important;
  border: 1px solid rgba(163,124,84,.34) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

.sos-statpill .label {
  color: var(--sos-brass) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

.sos-statpill .value {
  color: var(--sos-light) !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
}

.sos-post__utility {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 -18px !important;
  padding: 14px 18px !important;
  background: rgba(5,11,15,.84) !important;
  border-top: 1px solid rgba(163,124,84,.18) !important;
  border-bottom: 1px solid rgba(163,124,84,.18) !important;
  box-sizing: border-box !important;
}

.sos-post__meta {
  color: var(--sos-text-soft) !important;
  font-size: .92rem !important;
}

.sos-post__meta * {
  font-size: .92rem !important;
}

.sos-post__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.sos-post__actions a,
.sos-post__actions .btn,
.sos-post__actions .postbit_quote,
.sos-post__actions .postbit_edit,
.sos-post__actions .postbit_qdelete,
.sos-post__actions .postbit_qrestore,
.sos-post__actions .postbit_multiquote {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 62px !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  background: #4a4e52 !important;
  color: var(--sos-light) !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-family: var(--sos-font) !important;
  font-size: .95rem !important;
}

.sos-post__actions a:hover,
.sos-post__actions .btn:hover {
  background: #5b6166 !important;
  color: #fff5ea !important;
}

.sos-post__body {
  min-height: 280px !important;
  margin: 0 -18px !important;
  padding: 26px 30px 34px !important;
  background: rgba(5,11,15,.96) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  font-size: 1.02rem !important;
  line-height: 1.9 !important;
  letter-spacing: 0 !important;
  box-sizing: border-box !important;
}

.sos-post__body p:last-child {
  margin-bottom: 0;
}

.sos-post__body a {
  color: var(--sos-link) !important;
}

.sos-post__body a:hover {
  color: var(--sos-link-hover) !important;
}

.sos-post__body .signature,
.sos-post__body .post_signature {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(163,124,84,.18);
}

/* kill old temporary stitched fragments if any survive */
.mp-righttop,
.sos-post-shell,
.post_meta,
.post_body:empty {
  display: none !important;
}

/* quick reply */
#quick_reply_form .row.mb-4.shadow-sm.border-0.rounded.bg-white,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none .card.border-0.shadow-sm {
  background: var(--sos-deep) !important;
  border: 1px solid var(--sos-border) !important;
  box-shadow: var(--sos-shadow) !important;
  border-radius: 8px !important;
}

#quick_reply_form textarea.form-control,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none textarea.form-control {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-border) !important;
  box-shadow: none !important;
}

#quick_reply_form .btn,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none .btn {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-brass-strong) !important;
}

#quick_reply_form .btn:hover,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none .btn:hover {
  background: #3a4346 !important;
  color: #fff5ea !important;
}

.editor_control_bar {
  background: var(--sos-panel) !important;
  color: var(--sos-text) !important;
  border: 1px solid var(--sos-border) !important;
}

.card.body.bg-white.rounded.shadow-sm.mt-3.mb-3.border-0,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none .card-body.bg-white.shadow-sm.rounded.border-0.p-3.mt-3 {
  background: var(--sos-deep) !important;
  border: 1px solid var(--sos-border) !important;
  box-shadow: var(--sos-shadow) !important;
  color: var(--sos-text) !important;
}

/* footer */
#footer {
  background: transparent !important;
  color: var(--sos-text-soft) !important;
}

.sos-footer {
  background: var(--sos-deep);
  border-top: 1px solid var(--sos-border);
  margin-top: 40px;
  padding: 28px 0;
}

.sos-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
}

.sos-footer__left {
  flex: 1 1 580px;
  min-width: 0;
}

.sos-footer__right {
  flex: 0 1 320px;
  min-width: 260px;
}

.sos-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.sos-footer__links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sos-footer__credit {
  color: var(--sos-text-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

.sos-footer__search .input-group {
  display: flex;
  gap: 8px;
}

.sos-footer__search .form-control {
  flex: 1 1 auto;
}

.sos-footer__selectors {
  margin-top: 14px;
}

.sos-footer select,
.sos-footer .form-select,
.sos-footer .form-control {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-border) !important;
}

/* =========================================================
   COMPACT PASS
   Append this at the VERY BOTTOM of your CSS
   ========================================================= */

/* global scale-down */
:root{
  --sos-site-width: 1200px;
  --sos-sidebar-width: 240px;
  --sos-post-side-width: 280px;
  --sos-post-portrait-width: 200px;
  --sos-post-portrait-height: 400px;
  --sos-nav-height: 62px;
}

/* page background stays centered to the same width */
html,
body{
  background-size: var(--sos-site-width) auto !important;
  padding-top: var(--sos-nav-height) !important;
}

/* all main shells obey the smaller width */
.wrapper,
.container-md,
#container,
#content,
#main-content,
.sos-main,
.sos-cotf-shell,
#panel .upper .wrapper,
.menuwrapper .wrapper,
.sos-notices,
.sos-footer__inner,
.welcome,
#logobanner,
.sos-post{
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
}

/* =========================================================
   NAV / HEADER COMPACTING
   ========================================================= */

.menuwrapper .menu,
ul.menu{
  gap: 20px !important;
  min-height: var(--sos-nav-height) !important;
}

.menuwrapper .menu a,
ul.menu li a{
  padding: 16px 0 !important;
  font-size: .88rem !important;
  letter-spacing: .06em !important;
}

#header{
  padding-top: var(--sos-nav-height) !important;
}

.sos-accountbar{
  padding: 8px 10px !important;
}

.sos-accountbar__hello{
  font-size: .95rem !important;
}

.sos-accountbar__links a{
  padding: 4px 8px !important;
  font-size: .82rem !important;
}

/* banner text */
#logobanner{
  min-height: 440px !important;
}

#logobanner .logotitle{
  top: 122px !important;
  left: 22% !important;
}

#logobanner .plotheader{
  top: 182px !important;
  left: 22% !important;
}

#logobanner .logotitle a,
#logobanner .logotitle{
  font-size: clamp(2.2rem, 3vw, 3.6rem) !important;
  letter-spacing: .03em !important;
}

#logobanner .plotheader{
  font-size: clamp(.9rem, 1.1vw, 1.15rem) !important;
  letter-spacing: .09em !important;
}

/* =========================================================
   INDEX / SIDEBAR COMPACTING
   ========================================================= */

.sos-cotf-shell,
#container{
  grid-template-columns: var(--sos-sidebar-width) minmax(0, 1fr) !important;
  gap: 12px !important;
}

#sidebar-collapse,
.sos-sidebar,
#container > .float_left{
  width: var(--sos-sidebar-width) !important;
  min-width: var(--sos-sidebar-width) !important;
  max-width: var(--sos-sidebar-width) !important;
}

.trow1forum{
  padding: 12px 14px !important;
}

.sidelinksmenu{
  gap: 6px !important;
}

.sidelinksmenu a{
  padding: 7px 9px !important;
  font-size: .82rem !important;
}

/* =========================================================
   WELCOME TABLE COMPACTING
   ========================================================= */

.welcome{
  padding: 10px !important;
  margin-bottom: 22px !important;
  border-radius: 250px 250px 0 0 !important;
}

.welcome__arch{
  min-height: 250px !important;
  padding: 18px 14px 14px !important;
  border-radius: 360px 360px 0 0 !important;
}

.welcome__arch-fill{
  min-height: 205px !important;
}

.welcome__arch-hello{
  font-size: .9rem !important;
  margin-bottom: 6px !important;
}

.welcome__arch-title{
  font-size: 2rem !important;
}

.welcome__row{
  gap: 8px !important;
  margin-top: 8px !important;
}

.welcome__content{
  padding: 14px !important;
}

.welcome__title{
  padding: 7px 8px 6px !important;
}

.welcome__title p{
  font-size: 1.15rem !important;
}

.welcome__text{
  padding: 8px 10px !important;
}

.welcome__text-inner{
  max-height: 130px !important;
}

.welcome__text-inner p{
  margin-bottom: 8px !important;
  line-height: 1.55 !important;
  font-size: .92rem !important;
}

.welcome__weather{
  padding: 9px 10px !important;
}

.welcome__weather p{
  line-height: 1.5 !important;
  font-size: .9rem !important;
}

.welcome__links{
  padding: 10px !important;
  gap: 6px !important;
}

.welcome__links a{
  padding: 7px !important;
  font-size: .78rem !important;
}

.hover-avatar{
  width: 130px !important;
  height: 175px !important;
}

.hover-avatar img{
  width: 130px !important;
  height: 175px !important;
}

/* =========================================================
   POSTBIT COMPACTING
   Keeps portrait at 250x400, but shrinks everything else
   ========================================================= */

.sos-post{
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
}

.sos-post__grid{
  grid-template-columns: var(--sos-post-side-width) minmax(0, 1fr) !important;
}

.sos-post__side{
  padding: 10px 12px 12px !important;
  gap: 8px !important;
}

.sos-post__portraitwrap{
  padding: 10px !important;
}

.sos-post__portrait{
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
}

.sos-post__portrait img{
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
}

.sos-post__quote{
  padding: 10px 12px !important;
  min-height: 72px !important;
  font-size: .88rem !important;
  line-height: 1.25 !important;
}

.sos-post__main{
  padding: 10px 14px 0 !important;
}

.sos-post__namewrap{
  margin-bottom: 8px !important;
}

.sos-post__name{
  font-size: 1.55rem !important;
}

.sos-post__bar{
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 18px !important;
}

.sos-post__bar .mp-card{
  padding: 8px 9px !important;
}

.sos-post__bar .mp-card h4{
  font-size: .86rem !important;
  margin-bottom: 8px !important;
  padding-bottom: 5px !important;
}

.sos-post__bar .mp-card.mp-grid{
  gap: 6px !important;
}

.sos-post__bar .mp-pill{
  min-height: 24px !important;
  padding: 4px 8px !important;
  gap: 5px !important;
}

.sos-post__bar .mp-pill .label{
  font-size: .66rem !important;
}

.sos-post__bar .mp-pill .value{
  font-size: .7rem !important;
}

.sos-post__stats{
  gap: 8px !important;
  padding: 8px 4px 10px !important;
}

.sos-statpill{
  min-height: 28px !important;
  padding: 4px 8px !important;
  gap: 6px !important;
}

.sos-statpill .label{
  font-size: .74rem !important;
}

.sos-statpill .value{
  font-size: .78rem !important;
}

.sos-post__utility{
  padding: 10px 14px !important;
}

.sos-post__meta,
.sos-post__meta *{
  font-size: .78rem !important;
}

.sos-post__actions{
  gap: 6px !important;
}

.sos-post__actions a,
.sos-post__actions .btn,
.sos-post__actions .postbit_quote,
.sos-post__actions .postbit_edit,
.sos-post__actions .postbit_qdelete,
.sos-post__actions .postbit_qrestore,
.sos-post__actions .postbit_multiquote{
  min-width: 52px !important;
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: .82rem !important;
}

.sos-post__body{
  min-height: 220px !important;
  padding: 20px 24px 26px !important;
  font-size: .94rem !important;
  line-height: 1.75 !important;
}

/* =========================================================
   FOOTER COMPACTING
   ========================================================= */

.sos-footer{
  padding: 22px 0 !important;
}

.sos-footer__inner{
  gap: 20px !important;
}

.sos-footer__links{
  gap: 8px 14px !important;
}

.sos-footer__credit{
  font-size: .85rem !important;
}

/* =========================================
   REMOVE INDEX SIDEBAR / FULL-WIDTH BOARD COLUMN
   ========================================= */

.sos-main-shell {
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* kill the old two-column shell if it still appears anywhere */
.sos-cotf-shell {
  display: block !important;
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* hide leftover sidebar if any old markup survives */
#sidebar-collapse,
.sos-sidebar,
#container > .float_left {
  display: none !important;
}

/* let main forum column span the full shell */
#main-content,
.sos-main,
#container > .float_right,
.sos-main--full {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* navigation + boards fill the same width as welcome table */
#main-content .navigation,
.sos-main .navigation,
#main-content .tborder,
.sos-main .tborder,
.sos-board-activity {
  width: 100% !important;
  max-width: 100% !important;
}

/* =========================================
   NARROWER FORUM WIDTH
   ========================================= */

:root{
  --sos-site-width: 1100px;
}

/* all major shells */
.wrapper,
.container-md,
#container,
#content,
#main-content,
.sos-main,
.sos-cotf-shell,
#panel .upper .wrapper,
.menuwrapper .wrapper,
.sos-notices,
.sos-footer__inner,
.welcome,
#logobanner,
.sos-post{
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
}

/* keep the page background aligned to the same width */
html,
body{
  background-size: var(--sos-site-width) auto !important;
}

/* keep the fixed nav inner width matched too */
.menuwrapper .wrapper{
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
}

/*
Create a new stylesheet or append this to the bottom of your main stylesheet.
This is the cleaned shell layer for the guidebook page.
Your existing per-tab specialty CSS can be added underneath it.
*/

@import url(https://fonts.googleapis.com/css2?family=IM+Fell+English&family=Crimson+Text&display=swap);

.is-guidebook .welcome {
  display: none !important;
}

.guidebook-container {
  max-width: 1200px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 10;
  background-color: #071317;
  color: #BCBDBD;
  font-family: 'IM Fell English', serif;
  font-size: 13px;
  line-height: 1.6;
  padding: 20px;
  text-shadow: 0 0 5px #49535B;
  border: 1px solid rgba(163,124,84,.25);
  box-shadow: 0 0 30px rgba(0,0,0,.45);
}

.guidebook-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.guidebook-nav-menu {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 90px;
}

.guidebook-content-wrapper {
  flex-grow: 1;
  min-width: 0;
}

.guidebook-container input[type="radio"] {
  display: none;
}

.guidebook-container .guide-page {
  display: none;
  margin-top: 20px;
}

.guidebook-container .guide-page.active {
  display: block;
  animation: guide-fade-in .35s ease-out both;
}

@keyframes guide-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.guidebook-container .category {
  margin-bottom: 15px;
}

.guidebook-container .category-toggle {
  background-color: #101f22;
  color: #e0e0e0;
  font-size: 24px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid rgba(211,168,84,.2);
  box-shadow: 0 5px 15px rgba(0,0,0,.5);
  cursor: pointer;
  transition: background-color .3s, color .3s, transform .2s;
  text-shadow: 0 0 3px rgba(255,255,255,.5);
  user-select: none;
  display: block;
}

.guidebook-container .category-toggle:hover {
  background-color: rgba(211,168,84,.1);
  color: #A37C54;
  text-shadow: 0 0 5px #A37C54;
  transform: scale(1.02);
}

.guidebook-container .category-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease-in-out;
  background-color: #1a2b30;
  border-left: 2px solid #A37C54;
  border-right: 2px solid #A37C54;
  border-bottom: 2px solid #A37C54;
  border-radius: 0 0 8px 8px;
  padding: 0 10px;
}

.guidebook-container .category input[type="checkbox"]:checked ~ .category-menu {
  max-height: 500px;
}

.guidebook-container .category-menu label {
  display: block;
  margin-bottom: 5px;
  cursor: pointer;
  padding: 10px;
  transition: background-color .3s, transform .2s;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  color: #BCBDBD;
  text-shadow: 0 0 3px rgba(255,255,255,.5);
  font-size: 18px;
}

.guidebook-container .category-menu label:hover {
  background-color: rgba(211,168,84,.1);
  transform: translateX(5px);
  border-left: 2px solid #A37C54;
  color: #A37C54;
  text-shadow: 0 0 5px #A37C54;
}

.guidebook-container .guide-template {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: url(https://i.imgur.com/jd9Pxwk.jpeg) center center no-repeat;
  background-size: cover;
  border: 2px solid #A37C54;
  box-shadow: 0 0 25px rgba(0,0,0,.8), inset 0 0 10px rgba(0,0,0,.5);
  padding: 20px;
  border-radius: 10px;
  background-attachment: fixed;
}

.guidebook-container .template-title {
  font-size: 38px;
  text-align: center;
  color: #A37C54;
  text-shadow: 1px 1px 2px #000;
  margin-bottom: 5px;
}

.guidebook-container .template-subtitle {
  font-family: 'Crimson Text', serif;
  font-size: 14px;
  text-align: center;
  color: #A37C54;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.guidebook-container .template-info-box {
  padding: 30px;
  background-color: rgba(0,0,0,.3);
  border: 1px solid #A37C54;
  border-radius: 8px;
  line-height: 1.8;
}

.guidebook-container .template-info-box::after {
  content: "";
  display: block;
  clear: both;
}

.guidebook-container .info-header {
  display: flow-root;
  font-family: 'Crimson Text', serif;
  font-size: 24px;
  color: #A37C54;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 25px;
  margin-bottom: 15px;
  border-bottom: 2px solid #A37C54;
  padding-bottom: 5px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0,0,0,.3);
}

.guidebook-container .template-info-box p {
  color: #BCBDBD;
  text-align: justify;
  line-height: 1.6;
  margin-top: 0;
}

.guidebook-container .sidebar-img {
  width: 200px;
  height: 400px;
  object-fit: cover;
  border: 3px double #A37C54;
  box-shadow: 0 0 10px rgba(0,0,0,.6);
  border-radius: 200px 200px 10px 10px;
}

.guidebook-container .sidebar-img-left {
  float: left;
  margin: 0 18px 12px 0;
}

.guidebook-container .sidebar-img-right {
  float: right;
  margin: 0 0 12px 18px;
}

.guidebook-container .rules-list {
  counter-reset: rule;
  list-style: none;
  margin: 0;
  padding: 0;
}

.guidebook-container .rules-list li {
  position: relative;
  margin: 0 0 12px 0;
  padding: 12px 12px 12px 52px;
  border: 1px solid rgba(163,124,84,0.35);
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.25);
}

.guidebook-container .rules-list li::before {
  counter-increment: rule;
  content: counter(rule);
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #A37C54;
  border: 2px solid #A37C54;
  border-radius: 50%;
  background: rgba(7,19,23,0.75);
  box-shadow: 0 0 6px rgba(163,124,84,0.5), inset 0 0 4px rgba(0,0,0,0.6);
  font-weight: 700;
}

.guidebook-container .rules-list b {
  color: #d7c3a4;
  letter-spacing: .3px;
}

.guidebook-container .culture-page { display: none; }
.guidebook-container .culture-page.active { display: block; }
.guidebook-container .culture-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: flex-start;
  margin-bottom: 12px;
}
.guidebook-container .culture-tab {
  font-family: 'IM Fell English', serif;
  font-size: 13px;
  letter-spacing: .5px;
  background: #071317;
  color: #BCBDBD;
  border: 1px solid #A37C54;
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: .2s;
}
.guidebook-container .culture-tab:hover,
.guidebook-container .culture-tab.active {
  background: #A37C54;
  color: #071317;
}

.guidebook-container details {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(163,124,84,.35);
  border-radius: 10px;
  margin: 10px 0;
}

.guidebook-container summary {
  cursor: pointer;
  color: #A37C54;
  padding: 10px 14px;
}

@media (max-width: 768px) {
  .guidebook-layout { flex-direction: column; }
  .guidebook-nav-menu { width: 100%; position: static; }
  .guidebook-container { padding: 10px; }
  .guidebook-container .guide-template { padding: 15px; }
  .guidebook-container .template-info-box { padding: 15px; }
  .guidebook-container .info-header { font-size: 20px; }
  .guidebook-container .sidebar-img-left,
  .guidebook-container .sidebar-img-right {
    float: none;
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    margin: 0 0 12px 0;
  }
}

.is-guidebook .guidebook-page-shell {
  width: 100%;
  margin: 30px 0;
}

/* =========================================================
   SOS MYBB PROFILE REBUILD
   layout-inspired, tabless, gallery-first
   ========================================================= */

.sos-profile-page {
  background: transparent !important;
  box-shadow: none !important;
}

.sos-profile-page .content.cap-bottom {
  background: #091317 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35) !important;
  padding: 0 !important;
}

.sos-profile-hero {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
  gap: 22px;
  align-items: stretch;
  min-height: 220px;
  padding: 18px !important;
  background:
    linear-gradient(to bottom, rgba(5,11,15,.76), rgba(5,11,15,.86)),
    var(--sos-welcome-bg) center center / cover no-repeat !important;
  border: 1px solid rgba(163,124,84,0.22);
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
}

.sos-profile-hero__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sos-profile-hero__avatar img,
.sos-profile-hero__avatar .avatar img {
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 2px solid rgba(163,124,84,.55) !important;
  background: #0a1317;
  box-shadow: 0 0 12px rgba(161, 122, 82, .35), inset 0 0 1px #000;
}

.sos-profile-hero__main {
  min-width: 0;
  display: flex;
  align-items: center;
}

.sos-profile-hero .p-name {
  width: 100%;
  height: auto !important;
  background: transparent !important;
  text-align: left !important;
  line-height: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sos-profile-hero .p-name .name {
  height: auto !important;
  margin: 0 0 12px 0 !important;
  font-family: var(--sos-font) !important;
  font-size: clamp(2.1rem, 4vw, 3.6rem) !important;
  font-style: italic;
  letter-spacing: .04em;
  color: #E6E3D6 !important;
  text-shadow: 0 0 18px rgba(0,0,0,.45);
}

.sos-profile-hero .p-rank {
  height: auto !important;
  margin: 0 0 10px 0 !important;
  padding: 10px 14px !important;
  background: rgba(47,54,56,.85) !important;
  border: 1px solid rgba(163,124,84,0.22);
  color: #d4d6d6 !important;
  font-family: var(--sos-font) !important;
  font-size: 1rem !important;
  letter-spacing: .08em;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

.sos-profile-hero .pp-buttons {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: normal !important;
  text-align: left !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sos-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  background: rgba(10,20,23,.72);
  border: 1px solid rgba(163,124,84,.34);
  border-radius: 999px;
  color: #d4d6d6;
  font-size: .88rem;
}

.sos-profile-wrap {
  padding: 28px;
}

.sos-profile-top {
  display: grid;
  grid-template-columns: 320px minmax(0,1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}

.sos-profile-gallery {
  display: grid;
  gap: 12px;
}

.sos-profile-gallery__featured {
  background: rgba(10,20,23,.55);
  border: 1px solid rgba(163,124,84,0.22);
  padding: 12px;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.12), 0 10px 20px rgba(0,0,0,.22);
}

.sos-profile-gallery__featured img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 160px 160px 0 0;
  border: 2px solid rgba(163,124,84,.55);
  background: #0a1317;
}

.sos-mockprofile__thumbs {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sos-gallery-thumb {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(163,124,84,.45) !important;
  border-radius: 4px !important;
  background: rgba(15,23,27,.9) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.sos-gallery-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#sos-gallery-1:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-1"],
#sos-gallery-2:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-2"],
#sos-gallery-3:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-3"],
#sos-gallery-4:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-4"] {
  border-color: rgba(163,124,84,.9) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,.2) !important;
}

.sos-profile-overview {
  display: grid;
  gap: 14px;
}

.profile-scene-card {
  background: rgba(10,20,23,.55) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.12), 0 10px 20px rgba(0,0,0,.22);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.profile-scene-card__label {
  margin-bottom: 12px;
  color: #A37C54;
  font-family: var(--sos-font);
  font-size: 1.15rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(163,124,84,0.22);
  padding-bottom: 8px;
}

.profile-scene-card__summarylarge {
  color: #c7cbd1;
  line-height: 1.8;
  text-align: justify;
}

.profile-scene-card--scroll .profile-scene-card__summarylarge {
  max-height: 700px;
  overflow: auto;
  padding-right: 8px;
}

.ataglance-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
}

.atag__item {
  padding: 8px 10px;
  background: rgba(10,20,23,.55);
  border: 1px solid rgba(163,124,84,0.22);
  border-radius: 8px;
  color: #969ca5;
}

.sos-profile-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

.sos-statpill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 10px;
  background: rgba(15,23,27,.72);
  border: 1px solid rgba(163,124,84,.34);
  border-radius: 999px;
  box-sizing: border-box;
}

.sos-statpill .label {
  color: #A37C54;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sos-statpill .value {
  color: #E6E3D6;
  font-size: .9rem;
  font-weight: 600;
}

.profile-signature {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(163,124,84,0.22);
}

.sos-profile-page .app__footer {
  margin-top: 10px;
  padding-top: 6px;
  text-align: right;
}

.sos-profile-page .app__updated {
  display: inline-block;
  border: 1px solid rgba(163,124,84,0.22);
  border-radius: 999px;
  background: rgba(10,20,23,.55);
  color: #d4d6d6;
  font-size: 12px;
  letter-spacing: .5px;
  padding: 4px 10px;
}

@media (max-width: 980px) {
  .sos-profile-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sos-profile-hero__main {
    justify-content: center;
  }

  .sos-profile-hero .p-name {
    text-align: center !important;
  }

  .sos-profile-hero .pp-buttons {
    justify-content: center;
  }

  .sos-profile-top {
    grid-template-columns: 1fr;
  }

  .ataglance-grid,
  .sos-profile-stats__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   SOS MEMBER PROFILE RESTORE
   safe MyBB version of your old profile look
   ========================================= */

.sos-profile-shell {
  margin-top: 20px;
}

.sos-profile-shell .profile-title {
  min-height: 220px;
  background:
    linear-gradient(to bottom, rgba(5,11,15,.72), rgba(5,11,15,.86)),
    url(https://i.imgur.com/jd9Pxwk.jpeg) center center / cover no-repeat;
  border: 1px solid rgba(163,124,84,0.22);
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
  padding: 18px;
}

.sos-profile-shell .avvie {
  text-align: center;
}

.sos-profile-shell .avvie img,
.sos-profile-shell .avvie .avatar img {
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  border: 2px solid rgba(163,124,84,.55) !important;
  background: #0a1317;
  box-shadow: 0 0 12px rgba(161,122,82,.35), inset 0 0 1px #000;
}

.sos-profile-shell .p-name {
  min-height: 200px;
  text-align: left;
  line-height: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sos-profile-shell .p-name .name {
  font-family: "IM Fell English", Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-style: italic;
  letter-spacing: .04em;
  color: #E6E3D6;
  text-shadow: 0 0 18px rgba(0,0,0,.45);
  margin-bottom: 14px;
}

.sos-profile-shell .p-rank {
  background: #2F3638;
  color: #d4d6d6;
  border: 1px solid rgba(163,124,84,0.22);
  padding: 10px 14px;
  margin-bottom: 10px;
  font-family: "IM Fell English", Georgia, serif;
  font-size: 15px;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sos-profile-shell .pp-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.sos-profile-shell .pp-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  background: rgba(10,20,23,.72);
  border: 1px solid rgba(163,124,84,.34);
  border-radius: 999px;
  color: #d4d6d6;
  font-size: .88rem;
}

.sos-profile-shell .content.cap-bottom {
  background: #091317;
  border: 1px solid rgba(163,124,84,0.22);
  border-top: 0;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
}

.sos-profile-shell .p-summary {
  padding: 28px;
  color: #969ca5;
}

.sos-profile-shell .p-summary table {
  width: 100% !important;
  border-collapse: collapse;
  background: transparent !important;
}

.sos-profile-shell .p-summary td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(163,124,84,0.12);
  vertical-align: top;
}

.sos-profile-shell .p-summary strong {
  color: #A37C54;
  font-family: "IM Fell English", Georgia, serif;
  font-weight: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.sos-profile-shell .p-summary a {
  color: #d8c0a6 !important;
}

.sos-profile-shell .p-summary a:hover {
  color: #f1dfc8 !important;
}

.sos-profile-shell .signature,
.sos-profile-shell .post_signature {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(163,124,84,0.18);
}

@media (max-width: 900px) {
  .sos-profile-shell .profile-title table,
  .sos-profile-shell .profile-title tbody,
  .sos-profile-shell .profile-title tr,
  .sos-profile-shell .profile-title td {
    display: block;
    width: 100% !important;
  }

  .sos-profile-shell .profile-title td {
    padding-left: 0 !important;
    text-align: center;
  }

  .sos-profile-shell .p-name {
    text-align: center;
    margin-top: 18px;
  }

  .sos-profile-shell .pp-buttons {
    justify-content: center;
  }
}

/* =========================================================
   SOS PROFILE MOCKUP BUILD
   ========================================================= */

.sos-mockprofile-page {
  margin-top: 18px;
}

.sos-mockprofile {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  color: var(--sos-text);
}

.sos-mockprofile__namewrap {
  margin-bottom: 14px;
  text-align: center;
}

.sos-mockprofile__name {
  display: inline-block;
  padding: 0 14px;
  color: var(--sos-brass);
  font-family: var(--sos-font);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-style: italic;
  letter-spacing: .05em;
  text-shadow: 0 0 8px rgba(0,0,0,.5);
}

.sos-card {
  background:
    linear-gradient(to bottom, rgba(15,23,27,.88), rgba(8,14,17,.94)),
    var(--sos-post-top-bg) center center / cover no-repeat;
  border: 1px solid rgba(163,124,84,.45);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(163,124,84,.12), 0 10px 30px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.02);
  padding: 14px;
  margin-bottom: 16px;
}

.sos-section-title {
  margin: 0 0 12px 0;
  text-align: center;
  color: #f0e1a2;
  font-family: var(--sos-font);
  font-size: 2rem;
  font-style: italic;
  letter-spacing: .03em;
  text-shadow: 0 0 8px rgba(0,0,0,.55);
}

.sos-section-title--small {
  font-size: 1.7rem;
  margin-bottom: 10px;
}

.sos-mockprofile__hero {
  margin-bottom: 16px;
}

.sos-mockprofile__mainimage {
  width: 100%;
  height: 320px;
  border: 1px solid rgba(163,124,84,.55);
  border-radius: 18px 18px 0 0;
  background:
    linear-gradient(to bottom, rgba(15,23,27,.45), rgba(8,14,17,.65)),
    var(--sos-post-top-bg) center center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 16px rgba(0,0,0,.28);
}

.sos-mockprofile__thumbs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px 0;
}

.sos-gallery-thumb {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(163,124,84,.45);
  border-radius: 6px;
  background-color: var(--sos-deep);
  background-image: var(--thumb-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.sos-gallery-thumb:hover,
.sos-gallery-thumb.is-active {
  transform: translateY(-1px);
  border-color: rgba(163,124,84,.85);
  box-shadow: 0 0 0 2px rgba(163,124,84,.18);
}

.sos-mockprofile__toprow {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.sos-mockprofile__avatarcol {
  min-width: 0;
}

.sos-avatarwindow {
  height: 430px;
  padding: 10px;
  border: 1px solid rgba(163,124,84,.45);
  border-radius: 100px 100px 0 0;
  background:
    linear-gradient(to bottom, rgba(15,23,27,.88), rgba(8,14,17,.94)),
    var(--sos-post-top-bg) center center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(163,124,84,.12), 0 10px 30px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.02);
  overflow: hidden;
}

.sos-avatarwindow img,
.sos-avatarwindow .avatar img,
.sos-avatarwindow .avatar-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 88px 88px 0 0 !important;
  border: 1px solid rgba(163,124,84,.35) !important;
  background: var(--sos-deep);
}

.sos-mockprofile__rightcol {
  min-width: 0;
}

.sos-pillbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.sos-pill {
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(163,124,84,.45);
  border-radius: 999px;
  background: rgba(15,23,27,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.sos-pill__label {
  color: #d7c3a4;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sos-pill__value {
  color: var(--sos-light);
  font-size: 1rem;
  font-style: italic;
}

.sos-vitals {
  padding: 14px;
}

.sos-vitals__list {
  display: grid;
  gap: 8px;
}

.sos-vital {
  display: grid;
  grid-template-columns: 180px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(163,124,84,.36);
  border-radius: 999px;
  background: rgba(15,23,27,.78);
}

.sos-vital__label {
  color: #e9e4dc;
  font-family: var(--sos-font);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: .04em;
}

.sos-vital__value {
  color: var(--sos-light);
  font-size: 1rem;
  text-align: left;
}

.sos-tiergrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.sos-tiercard {
  min-height: 260px;
  border: 1px solid rgba(163,124,84,.42);
  border-radius: 12px;
  background: rgba(15,23,27,.75);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  overflow: hidden;
}

.sos-tiercard__title {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(163,124,84,.32);
  text-align: center;
  color: #f0e1a2;
  font-family: var(--sos-font);
  font-size: 1.35rem;
  font-style: italic;
}

.sos-tiercard__body {
  padding: 14px;
  color: var(--sos-light);
  line-height: 1.65;
  text-align: justify;
}

.sos-copy {
  color: var(--sos-light);
  line-height: 1.8;
  text-align: justify;
  font-size: 1rem;
}

.sos-mentalitygrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.sos-mini-card {
  border: 1px solid rgba(163,124,84,.42);
  border-radius: 12px;
  background: rgba(15,23,27,.75);
  padding: 12px;
}

.sos-mini-card__title {
  margin-bottom: 8px;
  text-align: center;
  color: #f0e1a2;
  font-family: var(--sos-font);
  font-size: 1.8rem;
  text-shadow: 0 0 8px rgba(0,0,0,.55);
}

.sos-mini-card__body {
  color: var(--sos-light);
  line-height: 1.7;
  text-align: center;
}

.sos-historyfamily {
  max-width: 62%;
  margin: 0 auto 14px;
  padding: 12px;
  border: 1px solid rgba(163,124,84,.36);
  border-radius: 10px;
  background: rgba(145,153,173,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.sos-historyfamily__title {
  margin-bottom: 8px;
  text-align: center;
  color: #f0e1a2;
  font-family: var(--sos-font);
  font-size: 1.8rem;
  text-shadow: 0 0 8px rgba(0,0,0,.55);
}

.sos-historyfamily__body {
  color: var(--sos-light);
  line-height: 1.7;
  text-align: center;
}

.sos-profile-signature {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(163,124,84,.22);
}

@media (max-width: 980px) {
  .sos-pillbar {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .sos-vital {
    grid-template-columns: 1fr;
    gap: 4px;
    border-radius: 18px;
  }

  .sos-tiergrid,
  .sos-mentalitygrid {
    grid-template-columns: 1fr;
  }

  .sos-historyfamily {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .sos-mockprofile__mainimage {
    height: 220px;
  }

  .sos-mockprofile__toprow {
    grid-template-columns: 1fr;
  }

  .sos-avatarwindow {
    max-width: 280px;
    margin: 0 auto;
    height: 380px;
  }

  .sos-mockprofile__name {
    font-size: 2.4rem;
  }
}

var thumbImg = thumbs[i].querySelector("img");

if (!url) {
  thumbs[i].style.display = "none";
} else {
  if (thumbImg) {
    thumbImg.src = url;
  }
}
	
	/* =========================================================
   SOS PROFILE FINAL TOP-SECTION FIX
   ========================================================= */

.sos-mockprofile {
  max-width: 700px !important;
}

.sos-mockprofile__hero {
  margin-bottom: 8px !important;
}

.sos-mockprofile__mainimage {
  height: 120px !important;
  padding: 6px !important;
  border-radius: 10px 10px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: rgba(10,20,23,.82) !important;
}

.sos-mockprofile__mainimage img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 1px solid rgba(163,124,84,.35) !important;
}

.sos-mockprofile__thumbs {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px 0 0 !important;
}

.sos-gallery-thumb {
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(163,124,84,.45) !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  background: rgba(15,23,27,.9) !important;
  cursor: pointer !important;
  overflow: hidden !important;
}

.sos-gallery-thumb:hover,
.sos-gallery-thumb.is-active {
  border-color: rgba(163,124,84,.85) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,.2) !important;
}

.sos-mockprofile__toprow {
  grid-template-columns: 130px minmax(0, 1fr) !important;
  gap: 8px !important;
  height: 400px !important;
  margin-bottom: 10px !important;
  align-items: stretch !important;
}

.sos-avatarwindow {
  height: 400px !important;
  padding: 6px !important;
  border-radius: 70px 70px 0 0 !important;
}

.sos-avatarwindow img,
.sos-avatarwindow .avatar img,
.sos-avatarwindow .avatar-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 64px 64px 0 0 !important;
}

.sos-mockprofile__rightcol {
  display: flex !important;
  flex-direction: column !important;
  height: 400px !important;
  min-height: 400px !important;
}

.sos-pillbar {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin-bottom: 4px !important;
}

.sos-pill {
  min-height: 26px !important;
  padding: 2px 6px !important;
}

.sos-pill__label,
.sos-pill__value {
  font-size: .72rem !important;
  color: var(--sos-light) !important;
  font-style: normal !important;
}

.sos-vitals {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.sos-vitals .sos-section-title--small {
  font-size: 1rem !important;
  margin-bottom: 4px !important;
}

.sos-vitals__list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  gap: 3px !important;
  padding-right: 2px !important;
}

.sos-vital {
  grid-template-columns: 90px minmax(0,1fr) !important;
  gap: 6px !important;
  min-height: 20px !important;
  padding: 2px 7px !important;
}

.sos-vital__label,
.sos-vital__value {
  font-size: .72rem !important;
  line-height: 1.15 !important;
  color: var(--sos-light) !important;
}

.sos-section-title,
.sos-section-title--small,
.sos-mini-card__title,
.sos-historyfamily__title,
.sos-tiercard__title {
  color: var(--sos-brass) !important;
  text-shadow: 0 0 6px rgba(0,0,0,.45) !important;
}

.sos-copy,
.sos-tiercard__body,
.sos-mini-card__body,
.sos-historyfamily__body {
  color: var(--sos-light) !important;
  font-size: .86rem !important;
  line-height: 1.55 !important;
}

@media (max-width: 760px) {
  .sos-mockprofile__toprow {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  .sos-mockprofile__rightcol {
    height: auto !important;
    min-height: 0 !important;
  }

  .sos-avatarwindow {
    max-width: 220px !important;
    margin: 0 auto !important;
  }

  .sos-vital {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   SOS PROFILE TOP FIX
   ========================================================= */

.sos-mockprofile {
  max-width: 760px !important;
}

/* ---------- top gallery ---------- */

.sos-mockprofile__hero {
  margin: 0 0 10px 0 !important;
  text-align: center !important;
}

.sos-gallery-radio {
  position: absolute !important;
  left: -9999px !important;
}

.sos-gallery-panels {
  margin-bottom: 6px !important;
}

.sos-gallery-stage {
  display: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
}

.sos-gallery-stage img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 170px !important;
  margin: 0 auto !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: contain !important;
}

#sos-gallery-1:checked ~ .sos-gallery-panels .sos-gallery-stage--1,
#sos-gallery-2:checked ~ .sos-gallery-panels .sos-gallery-stage--2,
#sos-gallery-3:checked ~ .sos-gallery-panels .sos-gallery-stage--3,
#sos-gallery-4:checked ~ .sos-gallery-panels .sos-gallery-stage--4 {
  display: block !important;
}

.sos-mockprofile__thumbs {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sos-gallery-thumb {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  border: 1px solid rgba(163,124,84,.45) !important;
  border-radius: 4px !important;
  background-color: rgba(15,23,27,.9) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

#sos-gallery-1:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-1"],
#sos-gallery-2:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-2"],
#sos-gallery-3:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-3"],
#sos-gallery-4:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-4"] {
  border-color: rgba(163,124,84,.9) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,.2) !important;
}

/* ---------- avatar + vitals row ---------- */

.sos-mockprofile__toprow {
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  justify-content: start !important;
  margin-bottom: 10px !important;
}

.sos-mockprofile__avatarcol {
  width: 200px !important;
  min-width: 200px !important;
}

.sos-avatarwindow {
  width: 200px !important;
  height: 400px !important;
  padding: 8px !important;
  border-radius: 95px 95px 0 0 !important;
  overflow: hidden !important;
}

.sos-avatarwindow img,
.sos-avatarwindow .avatar img,
.sos-avatarwindow .avatar-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 86px 86px 0 0 !important;
}

.sos-mockprofile__rightcol {
  width: 100% !important;
  max-width: 520px !important;
  height: 400px !important;
  min-height: 400px !important;
  display: flex !important;
  flex-direction: column !important;
}

.sos-pillbar {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin-bottom: 4px !important;
}

.sos-pill {
  min-height: 28px !important;
  padding: 2px 6px !important;
}

.sos-pill__label,
.sos-pill__value {
  font-size: .72rem !important;
  line-height: 1.1 !important;
  color: var(--sos-light) !important;
  font-style: normal !important;
}

.sos-vitals {
  flex: 1 1 auto !important;
  height: calc(400px - 32px) !important;
  max-height: calc(400px - 32px) !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  overflow: hidden !important;
}

.sos-vitals .sos-section-title--small {
  font-size: 1rem !important;
  margin-bottom: 4px !important;
}

.sos-vitals__list {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  gap: 3px !important;
  padding-right: 2px !important;
}

.sos-vital {
  grid-template-columns: 92px minmax(0,1fr) !important;
  gap: 6px !important;
  min-height: 20px !important;
  padding: 2px 7px !important;
}

.sos-vital__label,
.sos-vital__value {
  font-size: .72rem !important;
  line-height: 1.1 !important;
  color: var(--sos-light) !important;
}

@media (max-width: 760px) {
  .sos-mockprofile__toprow {
    grid-template-columns: 1fr !important;
  }

  .sos-mockprofile__avatarcol {
    width: auto !important;
    min-width: 0 !important;
  }

  .sos-avatarwindow {
    margin: 0 auto !important;
  }

  .sos-mockprofile__rightcol {
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .sos-vitals {
    height: auto !important;
    max-height: none !important;
  }

  .sos-vital {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================
   SOS FOOTER PRETTY PASS
   ========================================= */

#debug{
  display:none !important;
}

#footer{
  background: transparent !important;
  margin-top: 34px !important;
}

.sos-footer{
  position: relative;
  background:
    linear-gradient(to bottom, rgba(5,11,15,.82), rgba(5,11,15,.92)),
    url(https://i.imgur.com/JxTdugo.jpeg) center 62% / cover no-repeat !important;
  border-top: 1px solid rgba(163,124,84,.22) !important;
  box-shadow: inset 0 1px 0 rgba(163,124,84,.08);
  padding: 30px 0 36px !important;
}

.sos-footer::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - 40px);
  max-width: 1120px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to right, transparent, rgba(163,124,84,.55), transparent);
}

.sos-footer__inner{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 34px !important;
  align-items: start;
}

.sos-footer__left{
  min-width: 0;
}

.sos-footer__right{
  width: 100%;
  min-width: 0 !important;
}

.sos-footer__links{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  list-style: none !important;
}

.sos-footer__links li{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.sos-footer__links a{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid rgba(163,124,84,.30);
  border-radius: 999px;
  background: rgba(8,16,20,.58);
  color: #d6c3a8 !important;
  text-decoration: none !important;
  font-size: .92rem;
  letter-spacing: .03em;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .15s ease;
}

.sos-footer__links a:hover{
  border-color: rgba(163,124,84,.65);
  background: rgba(20,28,32,.82);
  color: #f0e2cf !important;
  transform: translateY(-1px);
}

.sos-footer__credit{
  color: #aeb4ba !important;
  font-size: .86rem !important;
  line-height: 1.8 !important;
  max-width: 720px;
}

.sos-footer__creditline{
  display: block;
}

.sos-footer__credit a{
  color: #d6c3a8 !important;
}

.sos-footer__credit a:hover{
  color: #f0e2cf !important;
}

.sos-footer__search{
  width: 100%;
}

.sos-footer__search .input-group{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px !important;
  align-items: stretch;
}

.sos-footer__search .form-control{
  min-height: 48px;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: rgba(8,16,20,.78) !important;
  border: 1px solid rgba(163,124,84,.28) !important;
  color: #d4d6d6 !important;
  box-shadow: none !important;
}

.sos-footer__search .form-control::placeholder{
  color: #7f8a91 !important;
  opacity: 1;
}

.sos-footer__search .button{
  min-width: 122px;
  min-height: 48px;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  background: rgba(47,54,56,.95) !important;
  border: 1px solid rgba(163,124,84,.35) !important;
  color: #e6e3d6 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: none !important;
}

.sos-footer__search .button:hover{
  background: rgba(60,69,73,.98) !important;
  border-color: rgba(163,124,84,.7) !important;
  color: #fff4e6 !important;
}

@media (max-width: 900px){
  .sos-footer__inner{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .sos-footer__right{
    max-width: 100%;
  }

  .sos-footer__search .input-group{
    grid-template-columns: 1fr;
  }

  .sos-footer__search .button{
    width: 100%;
  }
}

/* =========================================
   SOS POSTBIT STICKY SIDE
   sticks within each post only
   ========================================= */

/* grid must allow the side column to start at the top */
.sos-post__grid{
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 12px;
  align-items: start !important;
}

/* left column width */
.sos-post__side{
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  align-self: start !important;
}

/* the actual sticky element */
.sos-post__sticky{
  position: sticky;
  top: 80px; /* adjust if your fixed top bar is taller */
  align-self: start;
}

/* portrait shell */
.sos-post__portraitwrap{
  margin: 0 0 10px;
}

.sos-post__portrait{
  width: 250px;
  height: 400px;
  overflow: hidden;
  border: 2px solid var(--edge, #a17a52);
  border-radius: 100px 100px 0 0;
  background-color: #0a1317;
  box-shadow: 0 0 12px rgba(161,122,82,.35), inset 0 0 1px #000;
}

.sos-post__portrait img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* quote */
.sos-post__quote{
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(161,122,82,.28);
  background: rgba(10,19,23,.72);
  color: #c8ccd1;
  font-size: 11px;
  line-height: 1.55;
  text-align: center;
  border-radius: 10px;
}

/* sticky dies if an ancestor clips overflow */
.sos-post,
.sos-post__grid,
.sos-post__side,
.sos-post__main{
  overflow: visible !important;
}

/* desktop only */
@media (max-width: 991px){
  .sos-post__sticky{
    position: sticky;
    top: auto;
  }
}

/* =========================================
   JS STICKY POSTBIT SIDE
   ========================================= */

.sos-post__side{
  width: var(--sos-post-side-width, 300px) !important;
  min-width: var(--sos-post-side-width, 300px) !important;
  max-width: var(--sos-post-side-width, 300px) !important;
  position: relative !important;
  overflow: visible !important;
}

.sos-post__stickwrap{
  will-change: transform;
  transform: translateY(0);
}

.sos-post,
.sos-post__grid,
.sos-post__main{
  overflow: visible !important;
}

/* desktop only */
@media (max-width: 991px){
  .sos-post__stickwrap{
    transform: none !important;
  }
}