/* Lumière profile — believable phone-app profile view.
   UI chrome uses the system stack on purpose (it reproduces an app interface);
   the brand fonts live inside the posts themselves. */
:root {
  --ig-ink: #1c1a18;
  --ig-mut: #8a837c;
  --ig-line: rgb(28 26 24 / 10%);
}

body {
  background: #efece6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ig-ink);
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip-link { position: absolute; inset-inline-start: 8px; top: -48px; z-index: 20; background: #fff; padding: 10px 16px; border-radius: 10px; transition: top 0.2s; }
.skip-link:focus { top: 8px; }

.phone-shell {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100dvh;
  background: #fff;
  display: flex;
  flex-direction: column;
}

svg { width: 24px; height: 24px; fill: none; stroke: var(--ig-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* top bar */
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}
.app-user { font-weight: 700; font-size: 17px; letter-spacing: 0.01em; }
.app-icons { display: inline-flex; gap: 18px; }

/* head */
.profile-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 16px 4px;
}
.avatar-ring {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--lum-ink);
  display: grid; place-items: center;
  flex: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgb(28 26 24 / 18%);
}
.avatar { width: 52px; }
.profile-id h1 { margin: 0; font-size: 16px; font-weight: 700; }
.profile-meta { margin: 6px 0 0; font-size: 13.5px; color: var(--ig-mut); }

/* bio */
.profile-bio { padding: 10px 16px 0; font-size: 14px; line-height: 1.45; }
.profile-bio p { margin: 0; }
.bio-book { font-weight: 600; color: #24486e; }

/* actions */
.profile-actions {
  display: flex;
  gap: 8px;
  padding: 14px 16px 4px;
}
.profile-actions button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  border-radius: 10px;
  padding: 9px 0;
  cursor: pointer;
  min-height: 44px;
}
.btn-follow { flex: 1; background: var(--lum-sun); color: var(--lum-ink); }
.btn-message { flex: 1; background: #efece6; }
.btn-more { width: 44px; background: #efece6; display: grid; place-items: center; }
.btn-more svg { width: 18px; height: 18px; }

/* highlights */
.highlights {
  display: flex;
  gap: 22px;
  padding: 18px 16px 6px;
  overflow-x: auto;
}
.highlights a {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 64px;
  min-height: 44px;
  text-decoration: none;
  color: var(--ig-ink);
  font-size: 12px;
}
.hl {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid rgb(28 26 24 / 22%);
  background: var(--lum-paper);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 3px #fff inset;
}
.hl img { width: 30px; }
.hl.chip img { width: 40px; mix-blend-mode: multiply; }

/* tabs */
.grid-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ig-line);
  margin-top: 12px;
}
.grid-tabs span { display: grid; place-items: center; padding: 11px 0; opacity: 0.35; }
.grid-tabs span.on { opacity: 1; border-top: 1.5px solid var(--ig-ink); margin-top: -1px; }
.grid-tabs svg { width: 22px; height: 22px; stroke-width: 1.4; }

/* grid — real square crops like the app */
.feed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #fff;
}
.feed-grid button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.feed-grid img { width: 100%; height: 100%; object-fit: cover; }
.feed-grid button:focus-visible,
.profile-actions button:focus-visible,
.highlights a:focus-visible { outline: 2px solid #24486e; outline-offset: 2px; }

/* bottom bar */
.tab-bar {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid var(--ig-line);
  padding: 12px 10px 16px;
  background: #fff;
  position: sticky;
  bottom: 0;
}
.tab-bar svg { width: 25px; height: 25px; stroke-width: 1.5; }
.tab-avatar {
  width: 27px; height: 27px;
  border-radius: 50%;
  background: var(--lum-ink);
  display: grid; place-items: center;
}
.tab-avatar img { width: 15px; }

/* dialog viewer */
dialog {
  border: 0;
  border-radius: 14px;
  padding: 0;
  max-width: min(92vw, 560px);
  background: #fff;
}
dialog::backdrop { background: rgb(20 16 12 / 62%); }
dialog img { width: 100%; }
.dialog-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--ig-line);
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 44px;
  cursor: pointer;
}

@media (max-width: 400px) {
  .highlights { gap: 16px; }
}