:root{
  --bg: #fafbf5;
  --ink: #111;
  --muted: rgba(0,0,0,0.65);

  /* Old-school box look */
  --box-bg: rgba(255,255,255,0.92);
  --box-border: #b9b9b9;
  --box-border-dark: #8f8f8f;
  --shadow: 2px 2px 0 rgba(0,0,0,0.18);

  --radius: 2px;  /* boxy */
  --gap: 14px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;

  background:
    linear-gradient(0deg, rgba(0,0,0,0.03) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px) 0 0 / 18px 18px,
    var(--bg);
}

/* =========================
   Layout / boxes
========================= */
.wrap{
  width: min(1040px, 94vw);
  margin: 14px auto 40px;
}

.box{
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  border-right-color: var(--box-border-dark);
  border-bottom-color: var(--box-border-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 12px;
}

/* =========================
   HERO ROW (LEFT STACK + TOP 4)
========================= */
.hero-row{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--gap);
  align-items: start;
  margin-bottom: var(--gap);
}

.hero-left{
  display: grid;
  gap: var(--gap);
  grid-auto-rows: max-content;
}

/* ✅ Desktop-only: keep columns aligned, but DON'T force left to fill height */
@media (min-width: 901px){
  .hero-row{
    align-items: stretch;          /* keep right column behavior */
  }

  /* let left stack size to content */
  .hero-left{
    grid-template-rows: auto;      /* natural height */
    grid-auto-rows: max-content;   /* keep natural sizing */
    height: auto;                  /* no 100% stretching */
    min-height: 0;
    align-self: start;             /* top-align within stretched row */
  }

  /* stop contact from filling leftover height */
  .contact-card{
    height: auto;
    min-height: 0;
  }

  /* keep as-is */
  .topfriends{
    height: 100%;
    min-height: 0;
  }
}

/* Mobile: stack everything naturally */
@media (max-width: 900px){
  .hero-row{ grid-template-columns: 1fr; }
  .hero-left{ grid-template-rows: none; }
}

/* =========================
   Profile header (About box)
   Quick Info top-right aligned with photo
========================= */
.profile-header{
  display: block;
}

.profile-top{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap);
  align-items: start;
}

@media (max-width: 900px){
  .profile-top{ grid-template-columns: 1fr; }
}

.page-title{
  margin: 0 0 6px;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status{
  margin: 8px 0 10px;
  color: var(--muted);
  font-size: 13px;
}

.online-dot{
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(0,0,0,0.35);
  background: #2ecc71;
  margin-right: 8px;
  vertical-align: middle;
}

.tag-row{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.tag{
  display: inline-block;
  padding: 3px 8px;
  font-size: 12px;
  background: #eef3ff;
  border: 1px solid rgba(0,0,0,0.15);
}

/* Quick info */
.profile-right{ margin: 0; }

.profile-right .mini-box{
  padding: 0;
  width: 330px;
  max-width: 100%;
}

.mini-box-title{
  padding: 8px 10px;
  font-weight: 700;
  border-bottom: 1px solid rgba(0,0,0,0.14);
  background: #f0f0f0;
}

.mini-list{
  margin: 0;
  padding: 10px 14px 12px 18px;
  color: rgba(0,0,0,0.75);
  font-size: 13px;
}

/* Profile photo (special case) */
.photo-slot[aria-label="Friends + Family profile photo"]{
  width: 150px;
  height: 150px;
  aspect-ratio: auto;
}

.photo-slot[aria-label="Friends + Family profile photo"] img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #f6f7ef;
}

/* =========================
   NEW CONTACT CARD (screenshot vibe)
========================= */
.contact-card{
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.contact-card-title{
  padding: 8px 10px;
  font-weight: 700;
  background: #f0f0f0;
  border-bottom: 1px solid rgba(0,0,0,0.14);
  color: rgba(0,0,0,0.78);
  text-transform: none;
}

.contact-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 18px;
  padding: 10px 12px 12px;
  align-content: start;
  flex: 1;
  min-height: 0;
}

@media (max-width: 520px){
  .contact-actions{ grid-template-columns: 1fr; }
}

.action{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(0,0,0,0.78);
  font-weight: 700;
  font-size: 14px;
}

.action:hover{
  text-decoration: underline;
}

/* Music card: force single column so Spotify fills box */
.music-card .contact-actions{
  grid-template-columns: 1fr;
}

.music-card iframe{
  width: 100% !important;
  display: block;
}

.ico{
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.18);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 18px;
  position: relative;
  background: #fff;
}

.ico.plus{ background: #dff7df; }
.ico.plus::after{ content:"+"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; color:#1a8f2d; }

.ico.star{ background: #fff3c7; }
.ico.star::after{ content:"★"; position:absolute; inset:0; display:grid; place-items:center; font-size:12px; color:#b88900; }

.ico.msg{ background: #e6f0ff; }
.ico.msg::after{ content:"✉"; position:absolute; inset:0; display:grid; place-items:center; font-size:12px; color:#2b5bbd; }

.ico.fwd{ background: #e6f0ff; }
.ico.fwd::after{ content:"➜"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; color:#2b5bbd; }

.ico.im{ background: #e9fbff; }
.ico.im::after{ content:"💬"; position:absolute; inset:0; display:grid; place-items:center; font-size:12px; }

.ico.stop{ background: #ffe1e1; }
.ico.stop::after{ content:"⛔"; position:absolute; inset:0; display:grid; place-items:center; font-size:12px; }

.ico.group{ background: #eef3ff; }
.ico.group::after{ content:"👥"; position:absolute; inset:0; display:grid; place-items:center; font-size:12px; }

.ico.flag{ background: #ffe1e1; }
.ico.flag::after{ content:"⚑"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; color:#b10000; }

/* ================================
   MySpace / Classic Contact Box (Old-School)
================================ */

.music-card{
  padding: 0;
  background: #ffffff;

  /* classic boxy border */
  border: 1px solid #7f9db9;

  /* hard edges (no modern rounding) */
  border-radius: 0;

  /* classic “bevel” (old UI look) */
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #9aaec2;
}

/* flat blue header like classic MySpace */
.music-card .contact-card-title{
  background: #5b86b8;        /* flat blue (no gradient) */
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;

  padding: 4px 10px;

  /* crisp divider under the bar */
  border-bottom: 1px solid #7f9db9;

  /* boxy edges */
  border-radius: 0;

  /* subtle inner top highlight like old UI */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}

/* interior area */
.music-card .contact-actions{
  background: #f2f2f2;        /* more “old” than bluish gray */
  padding: 10px;
  color: #1f3a5f;

  /* inner border like old tables */
  border-top: 1px solid #ffffff;
}

/* spotify embed: keep boxy too */
.music-card iframe{
  width: 100%;
  border-radius: 0;           /* remove modern rounded look */
  display: block;
}

/* =========================
   Top 4 — MySpace Orange Friend Space look
========================= */
.topfriends{
  margin: 0;

  /* classic “myspace module” border */
  border: 1px solid #d6a071;         /* warm tan border */
  border-radius: 0;
  background: #fffaf2;               /* slight warm paper tint */
  box-shadow: none;                   /* kill modern shadow feel */
  padding: 0;                         /* header bar should be flush */
}

/* orange title bar */
.topfriends-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  margin: 0;
  padding: 6px 10px;

  background: #f3b37a;               /* classic orange */
  border-bottom: 1px solid #d6a071;  /* crisp divider */
}

/* make the “Top Dog” title feel like old myspace */
.topfriends-header .box-title{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;              /* myspace didn’t force all caps here */
  color: #b35a1f;
}

/* optional small line under header if you use it */
.topfriends-sub{
  margin: 0;
  font-size: 12px;
  color: #333;
}

/* tighten inner content padding back in (grid area) */
.topfriends .topfriends-grid{
  padding: 10px;
}

/* friend name links: classic blue + underline */
.topfriends .friend-name{
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  color: #1e4fa3;                    /* myspace-ish link blue */
  text-decoration: underline;
}

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

.friend{
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 8px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.22);
  border-right-color: rgba(0,0,0,0.35);
  border-bottom-color: rgba(0,0,0,0.35);
}

.friend:hover{ background: #f7f7ff; }

.friend-photo{
  width: 165px;
  height: 165px;

  /* keep image from stretching */
  object-fit: cover;
  object-position: center;
  display: block;

  background:
    linear-gradient(135deg, rgba(0,0,0,0.05), rgba(0,0,0,0.00)),
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,0.06) 0px,
      rgba(0,0,0,0.06) 6px,
      rgba(255,255,255,0.0) 6px,
      rgba(255,255,255,0.0) 12px
    );

  border: 1px solid rgba(0,0,0,0.18);
}

/* Mobile only: allow it to shrink to the card width */
@media (max-width: 520px){
  .friend-photo{
    width: 100%;
    max-width: 165px;
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

.friend-name{
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
}

/* =========================
   Titles, text
========================= */
.box-title{
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.box p{
  margin: 0 0 10px;
  color: rgba(0,0,0,0.78);
  line-height: 1.5;
  font-size: 13px;
}

.mini-h{
  margin: 12px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.70);
}

.bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(0,0,0,0.78);
  font-size: 13px;
}

/* =========================
   Photo slots (default)
========================= */
.photo-box .caption{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(0,0,0,0.62);
}

.photo-slot{
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  overflow: hidden;
  position: relative;
}

.photo-slot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =========================
   Content grid (below hero)
========================= */
.grid{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--gap);
  align-items: start; /* ✅ FIX: prevents left "Our Story" from stretching to match right column height */
}

.grid > article.box p{
  font-size: 15px;   /* try 15px or 16px */
  line-height: 1.7;
}

@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr; }
}

/* comments */
.comments .comment{
  border-top: 1px solid rgba(0,0,0,0.14);
  padding-top: 10px;
  margin-top: 10px;
}

.comment-meta{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: rgba(0,0,0,0.60);
  margin-bottom: 6px;
}

.comment-name{
  font-weight: 700;
  color: rgba(0,0,0,0.72);
}