/* The portal uses its own page chrome around XenForo's session and overlays. */
#XF[data-template="summer_pw_portal"] .p-footer,
#XF[data-template="summer_pw_portal"] .p-header,
#XF[data-template="summer_pw_portal"] .p-navSticky,
#XF[data-template="summer_pw_portal"] .p-nav,
#XF[data-template="summer_pw_portal"] .p-sectionLinks,
#XF[data-template="summer_pw_portal"] .summer-hero,
#XF[data-template="summer_pw_portal"] .summer-shortcuts,
#XF[data-template="summer_pw_portal"] .p-body-header,
#XF[data-template="summer_pw_portal"] .p-body-inner > .p-breadcrumbs,
#XF[data-template="summer_pw_portal"] .p-body-inner > .p-breadcrumbs--bottom,
#XF[data-template="summer_pw_portal"] .p-body-main > .p-body-contentCol { display: none !important; }
#XF[data-template="summer_pw_portal"] .p-body,
#XF[data-template="summer_pw_portal"] .p-body-inner,
#XF[data-template="summer_pw_portal"] .p-body-main,
#XF[data-template="summer_pw_portal"] .p-body-content,
#XF[data-template="summer_pw_portal"] .p-body-pageContent {
  display: block; width: 100% !important; max-width: none !important; min-width: 0; margin: 0 !important;
  padding: 0 !important; background: transparent; border: 0; box-shadow: none;
}

/* The same palette and artwork as the forum. Local fallbacks are useful for previews. */
.sp-portal {
  --paper:var(--summer-paper,#f4f0e5); --ink:var(--summer-ink,#253d48); --muted:var(--summer-muted,#746951);
  --line:var(--summer-line,#d7c6a3); --surface:var(--summer-panel,#fffcf5); --soft:var(--summer-panel-soft,#f7f1e5);
  --accent:#795521; --hover:var(--summer-ice,#e9f1ef); --focus:#27738c; --nav-text:#334950;
  --display:Georgia,"Times New Roman",serif; --ui:"Segoe UI",Arial,sans-serif;
  margin:0; background:transparent; color:var(--ink); font:16px/1.5 var(--ui);
}
html[data-summer-theme="twilight"] .sp-portal {
  --paper:var(--summer-paper,#1b272e); --ink:var(--summer-ink,#ece6d8); --muted:var(--summer-muted,#c5bdab);
  --line:var(--summer-line,#58615b); --surface:var(--summer-panel,#25353d); --soft:var(--summer-panel-soft,#2c3b41);
  --accent:#e2c28a; --hover:var(--summer-ice,#31454d); --focus:#a5d7e3; --nav-text:#eee6d3;
}
.sp-portal *, .sp-portal *::before, .sp-portal *::after {box-sizing:border-box}
.sp-portal a {color:inherit;text-decoration:none}
#XF .sp-portal a:focus-visible,#XF .sp-tools button:focus-visible {outline:3px solid var(--focus);outline-offset:3px}
.sp-portal .sp-wrap {width:min(calc(100% - 64px),1160px);margin-inline:auto}
.sp-top {color:var(--ink);background:var(--surface);border-bottom:1px solid var(--line)}
.sp-top__inner,.sp-tools,.sp-nav,.sp-account,.sp-nav__button,.sp-brand {display:flex;align-items:center}
.sp-top__inner {gap:20px;min-height:66px}
.sp-brand {flex:none}
.sp-brand img {display:block;width:99px;height:52px;object-fit:contain}
.sp-nav {flex:1;justify-content:center;flex-wrap:wrap;gap:6px}
.sp-tools {flex:none;gap:15px}
.sp-tools form {margin:0}
.sp-theme-form {display:flex;align-items:center}
.sp-tools button {appearance:none;border:0;background:transparent;color:inherit;font-family:inherit;line-height:inherit;cursor:pointer}
.sp-nav__button,.sp-account {justify-content:center;gap:7px;font:600 14px/1.25 var(--ui)}
.sp-nav__button,.sp-account {min-height:39px;padding:7px 13px;background:var(--soft);border:1px solid var(--line);border-radius:5px}
.sp-account {background:var(--surface)}
#XF .sp-portal .sp-top a,#XF .sp-portal .sp-top a:visited {color:var(--nav-text)}
#XF .sp-portal .sp-top a:hover,#XF .sp-portal .sp-top a:focus-visible,#XF .sp-portal .sp-top a:active {color:var(--ink);text-decoration:none}
.sp-nav__button:is(:hover,:focus-visible,:active),.sp-account:is(:hover,:focus-visible,:active) {background:var(--hover);border-color:var(--accent)}
.sp-tools .summer-theme-switch,.sp-tools .summer-language {min-height:36px}

.sp-hero {position:relative;isolation:isolate;overflow:hidden;background:transparent}
.sp-hero__picture,.sp-hero__picture img {position:absolute;inset:0;width:100%;height:100%;display:block}
.sp-hero__picture {z-index:-2;mask-image:linear-gradient(to bottom,#000 0%,#000 71%,transparent 100%)}
.sp-hero__picture img {object-fit:cover;object-position:center 15%}
.sp-hero__inner {display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:clamp(370px,32.5vw,575px);padding:22px 0 32px;text-align:center}
.sp-portal .sp-hero h1 {margin:0;width:clamp(268px,25.5vw,412px);line-height:1;filter:drop-shadow(0 5px 13px #282d3033)}
.sp-hero h1 img {width:100%;height:auto;display:block}
.sp-overline {margin:3px 0 0;padding:4px 12px;border-radius:12px;background:rgba(249,245,226,.88);color:#34484c;font:700 11px/1.2 var(--ui);letter-spacing:.17em;text-transform:uppercase}
.sp-overline span {padding:0 4px;color:#846627}
html[data-summer-theme="twilight"] .sp-overline {color:#f1e7cf;background:rgba(28,40,48,.88)}
html[data-summer-theme="twilight"] .sp-overline span {color:#e4c78f}
.sp-actions {width:min(100%,405px);display:flex;justify-content:center;gap:8px;margin-top:4px}
.sp-actions .sp-button {display:flex;align-items:center;justify-content:center;flex:1 1 0;max-width:202px;aspect-ratio:328 / 138;min-height:44px;border-radius:5px;padding:13px 25px;font:700 15px/1.18 var(--ui);text-align:center;background-position:center;background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(0 3px 6px #27282233)}
.sp-button--primary {--button-ink:#143448;background-image:url('forum/button-blue.png')}
.sp-button--secondary {--button-ink:#4a3416;background-image:url('forum/button-gold.png')}
#XF .sp-portal .sp-actions .sp-button,#XF .sp-portal .sp-actions .sp-button:is(:visited,:hover,:active,:focus-visible) {color:var(--button-ink);text-decoration:none}
.sp-actions .sp-button:is(:hover,:focus-visible) {filter:brightness(1.06) drop-shadow(0 4px 7px #27282238)}
.sp-actions .sp-button:active {filter:brightness(.98)}

.sp-social {
  display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0;
  --social-start: #fffaf0; --social-end: #e5eef0; --social-line: #baaa89; --social-hover: #73939b;
  --social-text: #284753; --social-note: #52636a; --social-glint: #fffcf4; --social-marker: #81693f;
}
html[data-summer-theme="twilight"] .sp-social {
  --social-start: #233b52; --social-end: #172d42; --social-line: #708591; --social-hover: #b3ceda;
  --social-text: #eef5fa; --social-note: #c5d6df; --social-glint: #425b6a; --social-marker: #d9bd88;
}
.sp-social__plate {
  display: inline-flex; align-items: center; gap: 10px;
  width: clamp(168px,14vw,195px); max-width: 100%; min-height: 56px; padding: 5px 14px 5px 7px;
  border: 1px solid var(--social-line); border-radius: 30px 6px 6px 30px;
  background: linear-gradient(110deg,var(--social-start) 15%,var(--social-end));
  box-shadow: inset 0 0 0 2px var(--social-glint);
}
.sp-social__plate::before {
  content: ""; flex: none; width: 43px; height: 43px; background: var(--social-art) center / contain no-repeat;
}
.sp-social__plate::after {
  content: ""; flex: none; width: 6px; height: 6px; margin-left: auto;
  border: solid var(--social-marker); border-width: 1px 1px 0 0; transform: rotate(45deg);
}
.sp-social__plate--telegram { --social-art: url("social/telegram-dawn.webp"); }
.sp-social__plate--discord { --social-art: url("social/discord-dawn.webp"); }
html[data-summer-theme="twilight"] .sp-social__plate--telegram { --social-art: url("social/telegram-twilight.webp"); }
html[data-summer-theme="twilight"] .sp-social__plate--discord { --social-art: url("social/discord-twilight.webp"); }
#XF .sp-portal a.sp-social__plate { color: var(--social-text); text-decoration: none; }
.sp-social__plate:is(:hover,:focus-visible) { border-color: var(--social-hover); background: var(--social-start); }
.sp-social__plate:is(:hover,:focus-visible) strong { text-decoration: underline; text-underline-offset: 3px; }
.sp-social__plate > span { min-width: 0; }
.sp-social__plate strong { display: block; font: 600 19px/1.12 var(--display); }
.sp-social__plate small { display: block; margin-top: 3px; color: var(--social-note); font: 500 11px/1.2 var(--ui); }

/* Give the painted lake one continuous canvas down to the page edge. */
#XF[data-template="summer_pw_portal"] {
  --sp-lake: url("landscape/dawn.webp");
  --sp-horizon: #f0deca;
  --sp-script: #2d241b;
  --sp-bronze: #66451e;
  --sp-rule: #a07940;
  --sp-wash: 253 244 222;
  --sp-foot: 27 38 35;
}
#XF[data-template="summer_pw_portal"][data-summer-theme="twilight"] {
  --sp-lake: url("landscape/twilight.webp");
  --sp-horizon: #102e45;
  --sp-script: #fff3d6;
  --sp-bronze: #f3d29a;
  --sp-rule: #c29f67;
  --sp-wash: 10 27 46;
  --sp-foot: 6 20 36;
}
#XF[data-template="summer_pw_portal"] .p-pageWrapper {
  position: relative;
  isolation: isolate;
  background: var(--sp-horizon);
}
#XF[data-template="summer_pw_portal"] .p-pageWrapper::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(65px, 7.5vw, 145px) 0 0;
  pointer-events: none;
  background: var(--sp-lake) center bottom / cover no-repeat;
}
.sp-portal .sp-body {
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 128px), 1080px);
  padding: 20px 0 clamp(44px, 6vw, 96px);
  color: var(--sp-script);
}
.sp-body :is(p,h2,h3) { margin: 0; color: inherit; }
.sp-about,.sp-columns,.sp-people { position: relative; isolation: isolate; }
.sp-about::before,.sp-columns::before,.sp-people::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -46px -12%;
  pointer-events: none;
  opacity: .73;
  background: radial-gradient(ellipse 52% 55% at center,rgb(var(--sp-wash) / .95) 42%,
      rgb(var(--sp-wash) / .88) 65%,rgb(var(--sp-wash) / .45) 82%,transparent 100%);
}
.sp-about {
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
  gap: clamp(38px,7vw,104px);
  align-items: center;
  padding: 30px 2.5% 38px;
  scroll-margin-top: 20px;
}
.sp-about__intro::before {
  content: "";
  display: block;
  width: 135px;
  height: 24px;
  margin-bottom: 13px;
  background: url("forum/divider.png") left center / contain no-repeat;
}
.sp-body .sp-about h2 { font: 400 clamp(48px,5.8vw,82px)/1 var(--display); letter-spacing: -.055em; }
.sp-about__intro p {
  max-width: 33ch;
  margin-top: 17px;
  font: 400 clamp(18px,1.65vw,24px)/1.44 var(--display);
}
.sp-features { display: grid; align-content: start; }
.sp-fact {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 17px;
  align-items: start;
  padding: 14px 0;
}
.sp-fact + .sp-fact { border-top: 1px solid color-mix(in srgb,var(--sp-rule) 48%,transparent); }
.sp-fact img { align-self: center; width: 48px; height: 45px; object-fit: contain; }
.sp-body .sp-fact h3 { font: 500 clamp(19px,1.65vw,24px)/1.18 var(--display); }
.sp-fact p,.sp-people p { margin-top: 4px; font: 400 14px/1.55 var(--ui); }

.sp-columns {
  display: grid;
  grid-template-columns: minmax(0,1.7fr) minmax(0,1fr);
  align-items: start;
  gap: clamp(32px,5vw,78px);
  margin: clamp(18px,3.5vw,50px) 2.5% 0;
}
.sp-columns > :only-child { grid-column: 1 / -1; }
.sp-columns::before { inset: -63px -13% -68px; }
.sp-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 15px; }
.sp-body .sp-heading h2,.sp-body .sp-people h2 {
  font: 400 clamp(28px,3vw,43px)/1.1 var(--display);
  letter-spacing: -.035em;
}
#XF .sp-portal .sp-heading a {
  flex: none; color: var(--sp-bronze);
  font: 600 13px/1.4 var(--ui); text-decoration: underline; text-underline-offset: 4px;
}
.sp-heading a:is(:hover,:focus-visible),.sp-feature a:hover .sp-read,.sp-news-list a:hover strong { text-decoration: underline; }
.sp-feature { position: relative; padding: 4px; background: rgb(var(--sp-foot) / .66); }
.sp-feature::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  --corner-color: #e1bb77;
  background:
    linear-gradient(var(--corner-color) 0 0) left top / 30px 2px,
    linear-gradient(var(--corner-color) 0 0) left top / 2px 22px,
    linear-gradient(var(--corner-color) 0 0) right top / 30px 2px,
    linear-gradient(var(--corner-color) 0 0) right top / 2px 22px,
    linear-gradient(var(--corner-color) 0 0) left bottom / 30px 2px,
    linear-gradient(var(--corner-color) 0 0) left bottom / 2px 22px,
    linear-gradient(var(--corner-color) 0 0) right bottom / 30px 2px,
    linear-gradient(var(--corner-color) 0 0) right bottom / 2px 22px;
  background-repeat: no-repeat;
}
.sp-feature__link {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(190px,17.5vw,255px); padding: clamp(20px,2.25vw,34px); background: #19272a;
}
.sp-feature__art,.sp-feature__art img,.sp-feature__link::before { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-feature__art { z-index: -2; }
.sp-feature__art img { object-fit: cover; object-position: 62% 50%; }
.sp-feature__link::before {
  content: ""; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg,rgba(8,21,27,.91),rgba(8,21,27,.67) 35%,rgba(8,21,27,.03) 77%);
}
.sp-feature__copy { width: 68%; overflow-wrap: anywhere; }
.sp-date { color: #efcf91; font: 600 12px/1.4 var(--ui); }
.sp-body .sp-feature h3 { margin: 7px 0 11px; color: #fff9e9; font: 500 clamp(26px,2.6vw,39px)/1.06 var(--display); letter-spacing: -.025em; }
.sp-read { color: #f5d69a; font: 600 13px/1.5 var(--ui); }
.sp-read > span { display: inline-block; margin-left: 3px; }
.sp-news-list,.sp-directory ul { margin: 0; padding: 0; list-style: none; }
.sp-news-list li,.sp-directory li { border-bottom: 1px solid color-mix(in srgb,var(--sp-rule) 53%,transparent); }
.sp-news-list a,.sp-directory a { display: flex; align-items: center; gap: 13px; }
.sp-news-list a { justify-content: space-between; padding: 10px 0; }
.sp-news-list strong { font: 600 14px/1.4 var(--ui); overflow-wrap: anywhere; }
.sp-news-list time { color: var(--sp-bronze); font-size: 12px; }
.sp-directory .sp-heading { padding-left: 2px; }
.sp-directory ul { border-top: 1px solid var(--sp-rule); }
.sp-directory a { min-height: 49px; padding: 6px 3px; }
.sp-directory img { flex: none; width: 46px; height: 43px; object-fit: contain; }
.sp-directory strong { font: 500 clamp(18px,1.5vw,23px)/1.15 var(--display); }
.sp-directory i {
  position: relative; margin-left: auto; width: 29px; height: 13px; flex: none;
  overflow: hidden; font-size: 0; color: var(--sp-rule);
}
.sp-directory i::before {
  content: ""; position: absolute; inset: 6px 4px auto 0; height: 1px;
  background: linear-gradient(90deg,transparent,currentColor 40%);
}
.sp-directory i::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px;
  transform: rotate(45deg); border: 1px solid currentColor; background: rgb(var(--sp-wash) / .9);
}
#XF .sp-portal :is(.sp-directory,.sp-news-list) a { color: var(--sp-script); }
#XF .sp-portal :is(.sp-directory,.sp-news-list) a:is(:hover,:focus-visible) { color: var(--sp-bronze); text-decoration: underline; text-underline-offset: 3px; }
#XF .sp-portal .sp-directory a:is(:hover,:focus-visible) {
  background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--sp-rule) 20%,transparent) 14%,
                              color-mix(in srgb,var(--sp-rule) 20%,transparent) 85%,transparent);
}
.sp-directory a:is(:hover,:focus-visible) i::after { background: currentColor; }
.sp-empty { padding: 12px 0; border-block: 1px solid var(--sp-rule); }

.sp-people {
  display: flex; align-items: center; justify-content: space-between;
  margin: clamp(36px,5.3vw,75px) 2.5% 0; padding: 20px 0; gap: 30px;
  border-block: 1px solid color-mix(in srgb,var(--sp-rule) 72%,transparent);
}
.sp-people::before { inset: -42px -13%; }
.sp-people > div:first-child { max-width: 55ch; }
.sp-body .sp-people h2 { font-size: clamp(24px,2.35vw,34px); }

@media(min-width:701px) {
  .sp-about::before { inset-inline: max(-12%,calc(50% - 50vw + 10px)); }
  .sp-columns::before,.sp-people::before { inset-inline: max(-13%,calc(50% - 50vw + 10px)); }
  .sp-top { position: relative; border-bottom-color: var(--sp-rule); }
  .sp-nav { gap: clamp(2px,1.35vw,24px); }
  .sp-nav__button { min-height: 44px; padding: 8px 5px; border: 0; border-radius: 0; background: none; }
  .sp-nav__button:is(:hover,:focus-visible,:active) { background: none; box-shadow: inset 0 -1px var(--sp-rule); }
  .sp-nav__button + .sp-nav__button { position: relative; }
  .sp-nav__button + .sp-nav__button::before {
    content: ""; position: absolute; left: calc(0px - clamp(2px,.675vw,12px) - 1px); top: 50%;
    width: 3px; height: 3px; transform: rotate(45deg); background: var(--sp-rule);
  }
}

@media (max-width:1000px) {
  .sp-portal .sp-wrap { width: calc(100% - 38px); }
  .sp-portal .sp-body { width: calc(100% - 68px); }
  .sp-top__inner { gap: 12px; }
  .sp-tools { gap: 9px; }
  .sp-nav__button,.sp-account { padding: 7px 9px; font-size: 13px; }
  .sp-brand img { width: 84px; height: 47px; }
  .sp-about { gap: 30px; }
  .sp-people { flex-wrap: wrap; gap: 14px; }
}
@media (max-width:820px) {
  .sp-top__inner { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 3px 12px; padding: 3px 0 10px; }
  .sp-tools { justify-self: end; }
  .sp-nav { grid-row: 2; grid-column: 1/-1; justify-content: flex-start; }
  .sp-hero__inner { min-height: 335px; }
}
@media (max-width:700px) {
  #XF[data-template="summer_pw_portal"] .p-pageWrapper::before { background-position: 45% bottom; }
  .sp-portal .sp-wrap { width: calc(100% - 30px); }
  .sp-portal .sp-body { width: min(calc(100% - 40px),510px); padding-top: 17px; }
  .sp-top__inner { column-gap: 6px; }
  .sp-brand img { width: 83px; height: 44px; }
  .sp-nav {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px;
    border-top: 1px solid color-mix(in srgb,var(--sp-rule) 45%,transparent);
  }
  .sp-nav__button { font-size: 13px; min-height: 44px; padding: 6px; border: 0; border-radius: 0; background: none; }
  .sp-nav__button:is(:hover,:focus-visible,:active) { background: none; box-shadow: inset 0 -1px var(--sp-rule); }
  .sp-account { font-size: 12px; min-height: 34px; padding: 6px 9px; }
  .sp-hero__picture { position: relative; inset: auto; height: auto; aspect-ratio: 2.5; mask-image: linear-gradient(#000 73%, transparent 100%); }
  .sp-hero__picture img { object-fit: contain; }
  .sp-hero__inner { position: relative; min-height: 0; margin-top: max(-88px,-14vw); padding: 0 0 8px; }
  .sp-portal .sp-hero h1 { width: clamp(190px,50vw,292px); }
  .sp-overline { margin: 0; }
  .sp-actions { width: min(100%,350px); margin-top: 1px; gap: 1px; }
  .sp-actions .sp-button { font-size: 14px; padding: 12px 22px; min-height: 50px; }
  .sp-about { display: block; padding: 7px 0 0; }
  .sp-about::before,.sp-columns::before,.sp-people::before { inset-inline: -19px; }
  .sp-about__intro::before { width: 100px; height: 17px; margin-bottom: 7px; }
  .sp-body .sp-about h2 { font-size: clamp(43px,9vw,54px); }
  .sp-about__intro p { margin: 10px 0 15px; font-size: 19px; }
  .sp-fact { grid-template-columns: 38px minmax(0,1fr); gap: 12px; padding: 11px 0; }
  .sp-fact img { width: 38px; height: 38px; }
  .sp-fact p,.sp-people p { font-size: 14px; }
  .sp-columns { display: grid; grid-template-columns: minmax(0,1fr); gap: 29px; margin: 28px 0 0; }
  .sp-heading { gap: 8px; margin-bottom: 11px; }
  .sp-feature__link { min-height: 178px; padding: 17px; }
  .sp-feature__copy { width: 65%; }
  .sp-feature__art img { object-position: 69% 50%; }
  .sp-body .sp-feature h3 { font-size: clamp(23px,5vw,27px); }
  .sp-directory a { padding: 4px 1px; min-height: 46px; }
  .sp-directory img { width: 40px; height: 40px; }
  .sp-people { margin: 33px 0 0; padding: 17px 0; }
  .sp-social { flex: auto; gap: 8px; }
  .sp-social__plate { width: min(190px,calc((100% - 8px)/2)); min-width: 0; min-height: 50px; gap: 6px; padding: 5px 7px 5px 4px; }
  .sp-social__plate::before { width: 34px; height: 34px; }
  .sp-social__plate strong { font-size: 16px; }
  .sp-social__plate small { font-size: 10px; }
  .sp-social__plate::after { display: none; }
}
@media (max-width:480px) {
  .sp-tools { gap: 6px; }
  .sp-tools .summer-languages { padding-left: 6px; }
  .sp-account { width: 36px; min-height: 36px; padding: 0; }
  .sp-account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width:365px) {
  .sp-brand img { width: 62px; }
  .sp-tools { gap: 4px; }
  html[data-app="public"] .sp-tools .summer-language { padding-inline: 3px; }
}

