/* MySpace, about 2005.

   The details that make this read correctly are all small and all deliberate:
   Verdana at 11px, links in #003399, section headers as a solid blue bar with
   white text, one pixel borders everywhere, and a left column narrower than it
   should be. Getting any one of them wrong makes the page read as "a blue
   website" rather than as the specific thing it is imitating.

   Two things are on purpose NOT authentic. The page reflows on a phone, which
   MySpace never did, because a page nobody can read on the device they were
   sent the link on is not a joke anybody gets to see. And the type is 12px
   rather than the 10px that was genuinely common, which is the smallest size
   this still passes as legible at. */

:root {
  --ms-blue:   #6699cc;   /* the section headers and every border */
  --ms-navy:   #003399;   /* links, and the top bar */
  --ms-dark:   #002266;
  --ms-page:   #e6ecf5;
  --ms-orange: #E87722;   /* the one thing here that is ours */
}

body {
  background: var(--ms-page);
  color: #000;
  font: 12px/1.5 Verdana, Geneva, Arial, sans-serif;
}

a { color: var(--ms-navy); }
a:visited { color: #551a8b; }

.ms { max-width: 820px; margin: 0 auto; padding: 0 8px 40px; }

/* ── The chrome across the top ─────────────────────────────────────────── */

.ms-top {
  background: linear-gradient(#4b7ec2, var(--ms-navy));
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ms-logo {
  color: #fff;
  font: 700 20px/1 Verdana, Arial, sans-serif;
  letter-spacing: -.5px;
}
.ms-logo span { color: var(--ms-orange); }
.ms-top ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; }
.ms-top a { color: #fff; text-decoration: none; font-size: 11px; }
.ms-top a:hover, .ms-top a:focus { text-decoration: underline; }

.ms-page { background: #fff; border: 1px solid var(--ms-blue); border-top: 0; padding: 12px; }

/* The scrolling banner. A CSS animation rather than the element everybody
   remembers, which was never standard and is not worth resurrecting. Pauses
   for anyone who has asked for reduced motion (see base.css). */
.ms-banner { overflow: hidden; background: #fffbe6; border: 1px solid #e0c86a; padding: 5px 0; margin-bottom: 12px; }
.ms-scroll {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: ms-drift 22s linear infinite;
  font-size: 11px;
}
@keyframes ms-drift { to { transform: translateX(-200%); } }

.ms-head { margin-bottom: 12px; }
.ms-head h1 { font-size: 22px; margin: 0; color: var(--ms-navy); }
.ms-tag { margin: 2px 0 0; font-size: 12px; font-style: italic; color: #444; }

/* ── The two columns, which is the whole layout ────────────────────────── */

.ms-cols { display: flex; gap: 14px; align-items: flex-start; }
/* 330 rather than the 300 a MySpace profile column actually was. The Turnstile
   widget is a fixed 300px iframe that cannot reflow, and at 300 the column had
   282px of usable width once the border and the form's margins were taken off,
   so the widget hung over the right edge of the card. Nobody carries an exact
   memory of this column's width; a widget poking through a border is visible to
   everybody. */
.ms-left  { width: 330px; flex: 0 0 330px; }
.ms-right { flex: 1 1 auto; min-width: 0; }

@media (max-width: 720px) {
  .ms-cols { display: block; }
  .ms-left { width: auto; }
  .ms-right { margin-top: 14px; }
}

/* ── The boxes ─────────────────────────────────────────────────────────── */

.ms-card { border: 1px solid var(--ms-blue); margin-bottom: 14px; }
.ms-card > h2 {
  background: var(--ms-blue);
  color: #fff;
  font: 700 12px/1.3 Verdana, Arial, sans-serif;
  margin: 0;
  padding: 4px 8px;
}
.ms-card > *:not(h2) { margin-left: 8px; margin-right: 8px; }
.ms-card > *:last-child { margin-bottom: 10px; }
.ms-card h3 { font-size: 12px; margin: 14px 0 4px; color: var(--ms-dark); }
.ms-card p { margin: 8px 0; }

.ms-profile { text-align: center; padding-bottom: 4px; }
.ms-profile img { width: 240px; height: auto; margin: 10px auto 6px; display: block; }
.ms-status { font-weight: 700; color: #2a7f2a; font-size: 11px; }
.ms-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2a7f2a; margin-right: 6px;
  animation: ms-pulse 1.6s steps(1, end) infinite;
}
@keyframes ms-pulse { 50% { opacity: .25; } }
.ms-mood, .ms-login { font-size: 11px; color: #555; margin: 2px 0; }
.ms-headline { font-style: italic; font-size: 11px; text-align: left; }

.ms-note  { font-size: 11px; color: #555; }
.ms-empty { font-size: 11px; color: #555; font-style: italic; }
.ms-or    { font-size: 11px; border-top: 1px solid #dbe4f0; padding-top: 8px; }
.ms-network {
  text-align: center; font-size: 11px; color: #555;
  border: 1px dashed var(--ms-blue); padding: 8px; margin: 0;
}

/* Padding, not margin: `.ms-card > *:not(h2)` is more specific than this
   selector and was resetting margin-left to 8px, which left the bullets
   pressed up against the card border with nothing to hang in. */
.ms-list { margin: 8px 0; padding: 0 0 0 22px; }
.ms-list li { margin-bottom: 7px; }

/* The 16px comes off the width because `.ms-card > *:not(h2)` has already put
   an 8px margin either side of this table, and a margin on a table is added to
   its width rather than taken out of it: at a plain 100% it is 328 wide inside
   a 328 card and hangs 8px past the right border. Subtracting the margins is
   the fix, not a fudge.

   The cells are roomier than they were. 5px by 7px is close to what a 2005
   table really used and it is too tight to read a sentence out of at this type
   size. Legibility over cleverness applies to the furniture as well as to the
   copy. */
.ms-interests { border-collapse: collapse; width: calc(100% - 16px); font-size: 11px; }
.ms-interests th, .ms-interests td {
  border: 1px solid var(--ms-blue);
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
  line-height: 1.5;
}
.ms-interests th { background: #dbe4f0; width: 84px; font-weight: 700; }

/* The Top 8, which was the actual social currency of this website. */
.ms-top8 { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; }
.ms-top8 a { display: block; text-align: center; text-decoration: none; font-size: 10px; line-height: 1.3; }
.ms-avatar {
  display: block;
  height: 56px;
  background: linear-gradient(#f3f6fb, #cfdcee);
  border: 1px solid var(--ms-blue);
  color: var(--ms-navy);
  font: 700 26px/56px Verdana, Arial, sans-serif;
  margin-bottom: 3px;
}
.ms-friend { display: block; }
.ms-top8 a:hover .ms-avatar, .ms-top8 a:focus .ms-avatar { background: var(--ms-orange); color: #fff; border-color: var(--ms-orange); }
@media (max-width: 480px) { .ms-top8 { grid-template-columns: repeat(2, 1fr); } }

.ms-counter { text-align: center; }
.ms-counter span {
  display: inline-block;
  background: #000; color: #33ff33;
  font: 700 18px/1.4 "Courier New", monospace;
  width: 16px;
  border: 1px solid #666;
}

.ms-comment { border-top: 1px solid #dbe4f0; padding-top: 10px; margin-top: 10px; font-size: 11px; }
.ms-comment .quote-body p { margin: 0 0 6px; }
.ms-comment .quote-by { color: #555; }

/* ── The form, which is the one part that has to work ──────────────────── */

.ms-field { margin: 10px 0; }
.ms-field label { display: block; font-weight: 700; font-size: 11px; margin-bottom: 3px; }
.ms-field input, .ms-field textarea {
  width: 100%;
  font: 12px/1.4 Verdana, Arial, sans-serif;
  padding: 4px;
  border: 1px solid #7f9db9;
  background: #fff;
}
.ms-field input:focus, .ms-field textarea:focus { outline: 2px solid var(--ms-orange); outline-offset: 1px; }
.ms-field.is-bad input, .ms-field.is-bad textarea { border-color: #b00020; background: #fff6f6; }

.rt-field-err { color: #b00020; font-size: 11px; margin: 4px 0 0; font-weight: 700; }
.rt-err {
  background: #fff6f6; border: 1px solid #b00020; color: #6b0014;
  padding: 8px; font-size: 11px; margin: 10px 8px;
}

.ms-send button {
  background: linear-gradient(#f7f7f7, #dedede);
  border: 1px solid #7f9db9;
  padding: 6px 18px;
  font: 700 12px/1 Verdana, Arial, sans-serif;
  cursor: pointer;
}
.ms-send button:hover, .ms-send button:focus { background: var(--ms-orange); color: #fff; border-color: var(--ms-orange); }