:root {
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --text-primary: #191919;
  --text-secondary: #6b6b6b;
  --border-subtle: #e5e5e5;
  --border-strong: #cdcdcd;
  --accent: #0f7bff;
  --radius-card: 12px;
  --radius-pill: 999px;
  --space-unit: 4px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
}

.page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: calc(var(--space-unit) * 8) calc(var(--space-unit) * 4);
}

.content {
  width: 100%;
  max-width: 420px;
  background: var(--bg-elevated);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle);
  padding: calc(var(--space-unit) * 7) calc(var(--space-unit) * 7);
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * 6);
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--space-unit) * 3);
}

.avatar-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  overflow: hidden;
  background: #f3f3f3;
  border: 1px solid var(--border-subtle);
}

.avatar {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.profile-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * 1.5);
  align-items: flex-start;
}

.name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0;
}

.social-row {
  display: flex;
  gap: calc(var(--space-unit) * 4);
  margin-top: calc(var(--space-unit) * 1);
}

.social-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #000000;
  font-size: 1.1rem;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

.social-icon:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

.social-icon:active {
  transform: scale(1.05);
}

.social-icon i {
  font-size: 1.1rem;
}

.tagline {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.blurb {
  margin: 0;
  margin-top: calc(var(--space-unit) * 2);
  text-align: left;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.blurb p {
  margin: 0 0 calc(var(--space-unit) * 3);
}

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

.blurb-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.blurb-link:hover {
  text-decoration: underline;
}

.links {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-unit) * 3);
}

.link-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: calc(var(--space-unit) * 4);
  padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 4);
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.link-card:hover {
  background: #f8f9fa;
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.link-divider {
  margin-top: calc(var(--space-unit) * 3);
  height: 1px;
  border: none;
  /* Morse: .... . .-.. .-.. --- / .-- --- .-. .-.. -.. --..-- / .. / .- -- / .- / -... ..- .. .-.. -.. . .-. (hello world, i am a builder) */
  background: linear-gradient(
    90deg,
    var(--border-strong) 0 3px, transparent 3px 5px,
    var(--border-strong) 5px 8px, transparent 8px 10px,
    var(--border-strong) 10px 13px, transparent 13px 15px,
    var(--border-strong) 15px 18px, transparent 18px 22px,
    var(--border-strong) 22px 25px, transparent 25px 29px,
    var(--border-strong) 29px 32px, transparent 32px 34px,
    var(--border-strong) 34px 42px, transparent 42px 44px,
    var(--border-strong) 44px 47px, transparent 47px 49px,
    var(--border-strong) 49px 52px, transparent 52px 56px,
    var(--border-strong) 56px 59px, transparent 59px 61px,
    var(--border-strong) 61px 69px, transparent 69px 71px,
    var(--border-strong) 71px 74px, transparent 74px 76px,
    var(--border-strong) 76px 79px, transparent 79px 83px,
    var(--border-strong) 83px 91px, transparent 91px 93px,
    var(--border-strong) 93px 101px, transparent 101px 103px,
    var(--border-strong) 103px 111px, transparent 111px 117px,
    var(--border-strong) 117px 120px, transparent 120px 122px,
    var(--border-strong) 122px 130px, transparent 130px 132px,
    var(--border-strong) 132px 140px, transparent 140px 144px,
    var(--border-strong) 144px 152px, transparent 152px 154px,
    var(--border-strong) 154px 162px, transparent 162px 164px,
    var(--border-strong) 164px 172px, transparent 172px 176px,
    var(--border-strong) 176px 179px, transparent 179px 181px,
    var(--border-strong) 181px 189px, transparent 189px 191px,
    var(--border-strong) 191px 194px, transparent 194px 198px,
    var(--border-strong) 198px 201px, transparent 201px 203px,
    var(--border-strong) 203px 211px, transparent 211px 213px,
    var(--border-strong) 213px 216px, transparent 216px 218px,
    var(--border-strong) 218px 221px, transparent 221px 225px,
    var(--border-strong) 225px 233px, transparent 233px 235px,
    var(--border-strong) 235px 238px, transparent 238px 240px,
    var(--border-strong) 240px 243px, transparent 243px 247px,
    var(--border-strong) 247px 255px, transparent 255px 257px,
    var(--border-strong) 257px 265px, transparent 265px 267px,
    var(--border-strong) 267px 270px, transparent 270px 272px,
    var(--border-strong) 272px 275px, transparent 275px 277px,
    var(--border-strong) 277px 285px, transparent 285px 287px,
    var(--border-strong) 287px 295px, transparent 295px 301px,
    var(--border-strong) 301px 304px, transparent 304px 306px,
    var(--border-strong) 306px 309px, transparent 309px 315px,
    var(--border-strong) 315px 318px, transparent 318px 320px,
    var(--border-strong) 320px 328px, transparent 328px 332px,
    var(--border-strong) 332px 340px, transparent 340px 342px,
    var(--border-strong) 342px 350px, transparent 350px 356px,
    var(--border-strong) 356px 359px, transparent 359px 361px,
    var(--border-strong) 361px 369px, transparent 369px 373px,
    var(--border-strong) 373px 381px, transparent 381px 383px,
    var(--border-strong) 383px 386px, transparent 386px 388px,
    var(--border-strong) 388px 391px, transparent 391px 393px,
    var(--border-strong) 393px 396px, transparent 396px 400px,
    var(--border-strong) 400px 403px, transparent 403px 405px,
    var(--border-strong) 405px 408px, transparent 408px 410px,
    var(--border-strong) 410px 418px, transparent 418px 422px,
    var(--border-strong) 422px 425px, transparent 425px 427px,
    var(--border-strong) 427px 435px, transparent 435px 437px,
    var(--border-strong) 437px 440px, transparent 440px 442px,
    var(--border-strong) 442px 445px, transparent 445px 449px,
    var(--border-strong) 449px 452px, transparent 452px 454px,
    var(--border-strong) 454px 462px, transparent 462px 464px,
    var(--border-strong) 464px 467px, transparent 467px 469px,
    var(--border-strong) 469px 472px, transparent 472px 476px,
    var(--border-strong) 476px 484px, transparent 484px 486px,
    var(--border-strong) 486px 489px, transparent 489px 491px,
    var(--border-strong) 491px 494px, transparent 494px 498px,
    var(--border-strong) 498px 501px, transparent 501px 505px,
    var(--border-strong) 505px 508px, transparent 508px 510px,
    var(--border-strong) 510px 518px, transparent 518px 520px,
    var(--border-strong) 520px 523px, transparent 523px 527px
  );
  background-size: 527px 1px;
  background-repeat: no-repeat;
}

.blog-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-unit) * 4);
  margin-top: calc(var(--space-unit) * 4);
}

.blog-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: var(--text-primary);
  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.blog-card:hover {
  background: #f8f9fa;
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.blog-card-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
}

.blog-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card--video-cover .blog-cover-img {
  object-position: center 65%;
}

.blog-card-label {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--space-unit) * 3);
  z-index: 1;
  padding: 0 calc(var(--space-unit) * 3);
  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 0.7rem;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 2px 6px rgba(0, 0, 0, 0.95), 0 4px 12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.02em;
  opacity: 1;
}

.blog-card-meta {
  position: absolute;
  bottom: calc(var(--space-unit) * 2);
  right: calc(var(--space-unit) * 2);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 calc(var(--space-unit) * 1.5);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1;
}

.link-thumb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.thumb-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
}

.link-thumb .thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link-body {
  display: flex;
  align-items: center;
  min-width: 0;
}

.link-title {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
}

.link-meta {
  font-size: 1.15rem;
  color: var(--text-secondary);
  opacity: 0.8;
  padding-left: calc(var(--space-unit) * 2);
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--space-unit) * 2);
  margin-top: calc(var(--space-unit) * 2);
}

.footer-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.theme-toggle {
  position: relative;
  width: 46px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: #f5f5f5;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition:
    background 180ms ease-out,
    border-color 180ms ease-out;
}

.theme-toggle-thumb {
  position: relative;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  transition:
    transform 180ms ease-out,
    background 180ms ease-out,
    box-shadow 180ms ease-out;
}

@media (max-width: 560px) {
  .page {
    padding: calc(var(--space-unit) * 6) calc(var(--space-unit) * 3);
  }

  .content {
    padding: calc(var(--space-unit) * 6);
  }

  .profile {
    align-items: center;
  }

  .name {
    font-size: 1.25rem;
  }
}