/* ==========================================================================
   STATE OF EVERYTHING - ALUMNI NETWORK
   platform stylesheet v4. do not edit this file, put your changes in the
   "custom CSS" box on your own profile - Maggie T, reunion committee

   This is the middle rung. It is a real 2005 social-network profile: the
   platform's own template is competent, and each profile owner has ruined it
   from inside the one text box the platform let them edit. Everything bad on
   any of these pages is bad because a person chose it.

   Every colour is a custom property so a school profile can re-skin the whole
   platform from its own stylesheet without touching this one. The defaults
   below are the platform's own purple.
   ========================================================================== */

:root {
  --sk-bg: #141033;
  --sk-tile: url("../assets/2005/tile-bg.svg");

  --sk-text: #ddd6ff;
  --sk-dim: #9b8bd6;
  --sk-faint: #8a7bc4;
  --sk-heading: #ffffff;
  --sk-name-sub: #b3a5e6;

  --sk-link: #99ccff;
  --sk-link-visited: #cc99ff;

  --sk-border: #6b57b8;
  --sk-border-soft: #4e3d96;
  --sk-pic-border: #8f7fd0;

  --sk-box: rgb(30 22 66 / 0.72);
  --sk-box-deep: rgb(20 14 48 / 0.8);
  --sk-well: #0d0a22;

  --sk-head-1: #7a64d4;
  --sk-head-2: #4e3aa0;

  --sk-mast-1: #6f5ac4;
  --sk-mast-2: #4a3591;
  --sk-mast-3: #3b2a78;
  --sk-mast-4: #5947a5;
  --sk-mast-gloss: #a89be0;
  --sk-mast-border: #5b47a8;

  --sk-tab-1: #2a1f5c;
  --sk-tab-2: #1c1442;
  --sk-tab-text: #c6b8ff;
  --sk-tab-sep: #3d2f78;
  --sk-tab-hover: #3a2c7d;
  --sk-tab-active: #6f5ac4;

  --sk-btn-1: #4a3a92;
  --sk-btn-2: #2c2064;
  --sk-btn-text: #e2d9ff;
  --sk-btn-hover-1: #6a55c0;
  --sk-btn-hover-2: #3c2c86;

  --sk-accent: #ffdd33;
  --sk-accent-1: #ffdd44;
  --sk-accent-2: #e6a800;
  --sk-accent-edge: #a87700;
  --sk-accent-ink: #4a3200;

  --sk-eq-1: #66ffcc;
  --sk-eq-2: #009966;
  --sk-led: #66ff99;

  --sk-display: "Trebuchet MS", Verdana, sans-serif;
}

/* --- the platform's chrome ----------------------------------------------- */

body {
  margin: 0;
  padding: 0 0 30px;
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
  color: var(--sk-text);
  background-color: var(--sk-bg);
  background-image: var(--sk-tile);
  background-repeat: repeat;
  background-attachment: fixed;
}

a { color: var(--sk-link); }
a:visited { color: var(--sk-link-visited); }
a:hover { color: #ffffff; }

img { border: 0; }

.page { width: 900px; margin: 0 auto; padding: 0 10px; }

@media (max-width: 940px) {
  .page { width: auto; max-width: 900px; }
}

/* Glossy Web 2.0 masthead: a gradient, a reflection, and a badge saying beta
   on a product that has been running for over twenty years. */
.masthead {
  position: relative;
  margin-top: 10px;
  padding: 12px 16px;
  border: 1px solid var(--sk-mast-border);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg,
    var(--sk-mast-1) 0%, var(--sk-mast-2) 48%,
    var(--sk-mast-3) 52%, var(--sk-mast-4) 100%);
  box-shadow: inset 0 1px 0 var(--sk-mast-gloss);
  overflow: hidden;
}

.masthead__logo {
  font-family: var(--sk-display);
  font-size: 27px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 2px 3px rgb(0 0 0 / 0.6);
  margin: 0;
  letter-spacing: -0.5px;
}

.masthead__logo em { font-style: normal; color: var(--sk-accent); }
.masthead__tag { margin: 2px 0 0; font-size: 10px; color: #d6ccff; }

.beta-flag {
  position: absolute;
  top: 8px;
  right: 10px;
  transform: rotate(12deg);
  background: linear-gradient(180deg, var(--sk-accent-1), var(--sk-accent-2));
  border: 1px solid var(--sk-accent-edge);
  border-radius: 3px;
  color: var(--sk-accent-ink);
  font-size: 9px;
  font-weight: bold;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}

.tabs {
  margin: 0;
  padding: 0 10px;
  list-style: none;
  background: linear-gradient(180deg, var(--sk-tab-1), var(--sk-tab-2));
  border: 1px solid var(--sk-mast-border);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

.tabs li { float: left; }

.tabs a {
  display: block;
  padding: 6px 14px;
  color: var(--sk-tab-text);
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  border-right: 1px solid var(--sk-tab-sep);
}

.tabs a:hover { background: var(--sk-tab-hover); color: #ffffff; }
.tabs .is-current a { background: var(--sk-tab-active); color: #ffffff; }

.clear { clear: both; }

/* --- the two columns ----------------------------------------------------- */

.cols { margin-top: 12px; }
.col-left { float: left; width: 240px; }
.col-right { float: right; width: 640px; }

@media (max-width: 940px) {
  .col-left, .col-right { float: none; width: auto; }
  .col-right { margin-top: 12px; }
}

/* The platform ships these boxes opaque. Every profile owner has made them
   translucent so "you can see the background", which is why nothing on any of
   these pages is quite readable. */
.box {
  margin-bottom: 12px;
  border: 1px solid var(--sk-border);
  border-radius: 5px;
  background: var(--sk-box);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.45);
}

.box__head {
  padding: 5px 9px;
  border-bottom: 1px solid var(--sk-border);
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--sk-head-1), var(--sk-head-2));
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
}

.box__body { padding: 9px; }

.box__body h3 {
  margin: 0 0 4px;
  font-family: var(--sk-display);
  font-size: 13px;
  color: var(--sk-accent);
  border-bottom: 1px dotted var(--sk-border);
  padding-bottom: 2px;
}

.box__body p { margin: 0 0 8px; }
.box__body p:last-child { margin-bottom: 0; }

/* --- profile card -------------------------------------------------------- */

.profile-pic {
  display: block;
  width: 180px;
  margin: 0 auto 6px;
  padding: 4px;
  background: #ffffff;
  border: 1px solid var(--sk-pic-border);
}

.profile-name {
  text-align: center;
  font-family: var(--sk-display);
  font-size: 16px;
  font-weight: bold;
  color: var(--sk-heading);
  margin: 0 0 2px;
  text-shadow: 0 1px 3px #000000;
}

.profile-sub { text-align: center; font-size: 10px; color: var(--sk-name-sub); margin: 0 0 6px; }
.profile-status { text-align: center; margin-bottom: 8px; }

.profile-meta { width: 100%; font-size: 10px; }
.profile-meta td { padding: 2px 0; vertical-align: top; }
.profile-meta td:first-child { color: var(--sk-dim); width: 78px; }

.contact-grid { width: 100%; border-collapse: collapse; }
.contact-grid td { width: 50%; padding: 2px; }

.contact-btn {
  display: block;
  padding: 5px 4px;
  border: 1px solid var(--sk-border);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--sk-btn-1), var(--sk-btn-2));
  color: var(--sk-btn-text);
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.contact-btn:hover {
  background: linear-gradient(180deg, var(--sk-btn-hover-1), var(--sk-btn-hover-2));
  color: #ffffff;
}

/* --- the music player ---------------------------------------------------- */

.player {
  background: var(--sk-well);
  border: 1px solid var(--sk-border);
  border-radius: 4px;
  padding: 7px;
  text-align: center;
}

.player__title { color: var(--sk-accent); font-weight: bold; font-size: 10px; margin-bottom: 4px; }
.player__track { color: var(--sk-tab-text); font-size: 10px; margin-bottom: 5px; }

.player__bars { display: flex; gap: 2px; justify-content: center; height: 22px; align-items: flex-end; margin-bottom: 5px; }
.player__bars i {
  display: block;
  width: 4px;
  background: linear-gradient(180deg, var(--sk-eq-1), var(--sk-eq-2));
  animation: eq2 0.6s ease-in-out infinite alternate;
}
.player__bars i:nth-child(2) { animation-delay: 0.12s; }
.player__bars i:nth-child(3) { animation-delay: 0.24s; }
.player__bars i:nth-child(4) { animation-delay: 0.06s; }
.player__bars i:nth-child(5) { animation-delay: 0.3s; }
.player__bars i:nth-child(6) { animation-delay: 0.18s; }
.player__bars i:nth-child(7) { animation-delay: 0.36s; }
@keyframes eq2 { from { height: 3px; } to { height: 22px; } }

.player button {
  font-family: Verdana, sans-serif;
  font-size: 10px;
  padding: 3px 10px;
  border: 1px solid var(--sk-border);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--sk-btn-1), var(--sk-btn-2));
  color: var(--sk-btn-text);
  cursor: pointer;
}

.player__note { font-size: 9px; color: var(--sk-faint); margin-top: 4px; }

/* --- top 8 -------------------------------------------------------------- */

.top8 { width: 100%; border-collapse: collapse; }
.top8 td { width: 25%; text-align: center; padding: 6px 3px; vertical-align: top; }

.top8 .avatar {
  display: block;
  width: 92px;
  height: 92px;
  margin: 0 auto 4px;
  padding: 3px;
  background-color: #ffffff;
  border: 1px solid var(--sk-pic-border);
  /* Photo slots fall back to a flat panel until the files land. */
  background-image: var(--photo, none);
  background-size: cover;
  background-position: center;
}

.top8 .name { font-size: 10px; font-weight: bold; display: block; }
.top8 .school { font-size: 9px; color: var(--sk-dim); display: block; }

.rank-1 { position: relative; }
.rank-1::after {
  content: "#1";
  position: absolute;
  top: 2px;
  left: 50%;
  margin-left: 34px;
  background: var(--sk-accent);
  color: var(--sk-accent-ink);
  font-size: 9px;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid var(--sk-accent-edge);
}

/* --- blog --------------------------------------------------------------- */

.blog-entry { border-bottom: 1px dotted var(--sk-border); padding-bottom: 8px; margin-bottom: 8px; }
.blog-entry:last-child { border-bottom: 0; margin-bottom: 0; }

.blog-entry h4 {
  margin: 0 0 2px;
  font-family: var(--sk-display);
  font-size: 13px;
  color: var(--sk-heading);
}

.blog-meta { font-size: 9px; color: var(--sk-dim); margin-bottom: 5px; }
.blog-meta svg { width: 14px; height: 14px; vertical-align: -3px; }

/* --- comment wall -------------------------------------------------------- */

.comment { border-collapse: collapse; width: 100%; margin-bottom: 8px; }
.comment td { vertical-align: top; padding: 5px; }
.comment .who-cell { width: 84px; text-align: center; }

.comment .who-pic {
  display: block;
  width: 68px;
  height: 68px;
  padding: 2px;
  background-color: #ffffff;
  border: 1px solid var(--sk-pic-border);
  background-image: var(--photo, none);
  background-size: cover;
  background-position: center;
}

.comment .who-name { font-size: 10px; font-weight: bold; display: block; margin-top: 2px; }

.comment .msg-cell {
  border: 1px solid var(--sk-border-soft);
  border-radius: 4px;
  background: var(--sk-box-deep);
}

.comment .stamp { font-size: 9px; color: var(--sk-faint); display: block; margin-bottom: 3px; }

/* --- the school split (network home only) -------------------------------- */

.school-split { width: 100%; border-collapse: collapse; }
.school-split td { width: 50%; padding: 6px; vertical-align: top; }

.school-panel { border: 2px solid; border-radius: 4px; padding: 10px; text-align: center; }
.school-panel img { width: 74px; margin: 0 auto 6px; display: block; }
.school-panel h4 { margin: 0 0 4px; font-size: 14px; font-family: var(--sk-display); }
.school-panel p { font-size: 10px; margin: 0 0 8px; }

/* The committee could not agree on one colour so they used both, badly. */
.school-panel--uh { border-color: #c9a24b; background: rgb(27 42 74 / 0.85); }
.school-panel--uh h4 { color: #c9a24b; }
.school-panel--pv { border-color: #3f6e5e; background: rgb(123 30 59 / 0.85); }
.school-panel--pv h4 { color: #ffb3c8; }

.enter-btn {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #000000;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--sk-accent-1), var(--sk-accent-2));
  color: var(--sk-accent-ink);
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.5);
}

.enter-btn:hover {
  background: linear-gradient(180deg, #fff08a, #ffbb22);
  color: var(--sk-accent-ink);
}

/* --- the door down to the 1998 page -------------------------------------- */

/* Every school profile has one of these: a link to the alumni page that
   predates this platform and which its owner refuses to retire. */
.old-site {
  border: 2px dashed var(--sk-accent-2);
  border-radius: 4px;
  background: var(--sk-box-deep);
  padding: 10px;
  text-align: center;
}

.old-site h4 {
  margin: 0 0 5px;
  font-family: var(--sk-display);
  font-size: 14px;
  color: var(--sk-accent);
}

.old-site p { font-size: 10px; margin: 0 0 8px; }
.old-site .caveat { font-size: 9px; color: var(--sk-faint); margin: 8px 0 0; }

/* --- odds and ends ------------------------------------------------------- */

.marquee-2005 {
  overflow: hidden;
  background: var(--sk-well);
  border: 1px solid var(--sk-border);
  border-radius: 4px;
  padding: 4px 0;
  margin-bottom: 12px;
}

.marquee-2005 span {
  display: inline-block;
  white-space: nowrap;
  color: var(--sk-eq-1);
  font-size: 11px;
  font-weight: bold;
  /* Negative delay so the bar is never empty on first paint - a real marquee
     starting off-screen right just reads as a broken black box. */
  animation: drift 22s linear infinite;
  animation-delay: -7s;
}

@keyframes drift { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

.counter-2005 {
  display: inline-block;
  background: #000000;
  border: 1px solid var(--sk-border);
  padding: 2px 4px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: var(--sk-led);
  letter-spacing: 2px;
}

.tagline-glitter { display: block; margin: 10px auto 0; max-width: 100%; }

.footer-2005 {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--sk-border-soft);
  border-radius: 5px;
  background: var(--sk-box-deep);
  text-align: center;
  font-size: 10px;
  color: var(--sk-dim);
}

.footer-2005 a { margin: 0 4px; }

.badge-strip { margin: 8px 0 0; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* The pop-under. It is 2005 and this is a design element. */
.popunder {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 250px;
  border: 2px solid var(--sk-border);
  border-radius: 4px;
  background: var(--sk-tab-2);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.7);
  z-index: 60;
}

.popunder__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 4px 3px 7px;
  background: linear-gradient(180deg, var(--sk-head-1), var(--sk-head-2));
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
}

.popunder__bar button {
  border: 1px solid var(--sk-btn-2);
  background: var(--sk-tab-text);
  color: var(--sk-btn-2);
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  padding: 1px 5px;
  cursor: pointer;
}

.popunder__body { padding: 8px; font-size: 10px; }

/* The one adult decision in the file. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .marquee-2005 span { transform: none; white-space: normal; }
}