/* Solésence social media concept: an Instagram-like profile for the ten redesigned posts and the
   nine new concept posts above them.
   Tokens mirror assets/css/style.css (kept separate so the two pages can change independently).
   No Instagram or Meta marks: the layout is familiar, the chrome is the concept's own. */

:root {
  --ink: #221A22;
  --dusk: #2B1A2C;
  --dusk-2: #382539;
  --plum: #A15A95;
  --plum-ink: #8A4A80;
  --burnt: #B64C27;
  --burnt-deep: #9A3F1F;
  --gold: #D4AF32;
  --zinc: #F1F3F3;
  --muted: #5E545D;
  --lilac: #CDB9CA;
  --line: #DADDDD;
  --notice: #F6D86B;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --page: 935px;
  --gutter: 16px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
html.viewer-open { overflow: hidden; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
p, ul, h1, h2, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--plum-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--plum); }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; border-radius: 4px; }
.num { font-stretch: 116%; font-weight: 620; font-variant-numeric: lining-nums tabular-nums; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 60;
  padding: 10px 16px; border-radius: 999px; background: var(--dusk); color: #fff;
  font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; color: #fff; }

/* the two views: the markup carries both labels, the root says which one shows */
[data-view="redesign"] .when-original,
[data-view="original"] .when-redesign,
[data-view="redesign"] .hl__list--original,
[data-view="original"] .hl__list--redesign { display: none; }

/* ==========================================================================
   CONCEPT NOTICE AND BAR
   ========================================================================== */
.concept-note { background: var(--notice); color: var(--ink); font-size: .8125rem; line-height: 1.45; }
.concept-note p { max-width: var(--page); margin: 0 auto; padding: 8px var(--gutter); text-align: center; }
.concept-note a { color: var(--ink); font-weight: 600; }

.bar { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.bar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: var(--page); height: 56px; margin: 0 auto; padding: 0 var(--gutter);
}
.bar__back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -6px; padding-right: 6px;
  color: var(--ink); font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.bar__back svg { width: 22px; height: 22px; flex: none; }
.bar__back:hover { color: var(--plum-ink); }
.bar__title { display: none; }

/* the Original / Redesign switch: two pressed-state buttons in a track */
.compare {
  display: inline-flex; flex: none; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--zinc);
}
.compare__btn {
  min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: .8125rem; font-weight: 600; line-height: 1;
  transition: background-color .16s var(--ease-out), color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
.compare__btn:hover { color: var(--ink); }
.compare__btn[aria-pressed="true"] {
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(34, 26, 34, .14), 0 0 0 1px rgba(34, 26, 34, .06);
}
.compare__btn:active { transform: scale(.97); }
.compare--small .compare__btn { min-height: 30px; padding: 0 11px; font-size: .75rem; }
.compare__btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ==========================================================================
   PROFILE HEADER
   ========================================================================== */
.profile { max-width: var(--page); margin: 0 auto; padding: 32px 20px 0; }

.head {
  display: grid;
  grid-template-columns: 290px auto 1fr;
  grid-template-areas:
    "avatar user actions"
    "avatar stats stats"
    "avatar bio bio";
  align-items: center;
  margin-bottom: 44px;
}
.head__avatar { grid-area: avatar; align-self: start; justify-self: center; padding-right: 30px; }
.avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; background: var(--dusk); }
.head__user { grid-area: user; margin-right: 20px; font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.2; }
.head__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 0 16px; border-radius: 8px;
  background: var(--zinc); color: var(--ink);
  font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .16s var(--ease-out), transform .16s var(--ease-out);
}
.btn:hover { background: #E3E6E6; color: var(--ink); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--burnt); color: #fff; }
.btn--primary:hover { background: var(--burnt-deep); color: #fff; }

.head__stats { grid-area: stats; margin-top: 20px; }
.stats { display: flex; gap: 40px; font-size: 1rem; }
.stats__n { font-weight: 600; font-variant-numeric: tabular-nums; }
.stats__note { margin-top: 4px; color: var(--muted); font-size: .75rem; }

.bio { grid-area: bio; margin-top: 16px; font-size: .875rem; line-height: 1.45; }
.bio__name { font-weight: 600; }
.bio__cat { color: var(--muted); }
.bio__link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
  font-weight: 600; text-decoration: none;
}
.bio__link svg { width: 14px; height: 14px; flex: none; }
.bio__link:hover { text-decoration: underline; }

/* ==========================================================================
   STORY HIGHLIGHTS
   ========================================================================== */
.hl { margin: 0 0 44px; }
.hl__list {
  display: flex; gap: 32px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 2px 16px 6px; scrollbar-width: none;
}
.hl__list::-webkit-scrollbar { display: none; }
.hl__item { flex: none; width: 87px; text-align: center; }
.hl__ring {
  display: block; width: 87px; height: 87px; padding: 4px;
  border: 1px solid var(--line); border-radius: 50%; background: #fff;
}
.hl__ring img, .hl__txt { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hl__txt {
  display: flex; align-items: center; justify-content: center; padding: 6px;
  background: #D46F38; color: #fff;                     /* their current covers' orange */
  font-size: .75rem; font-weight: 400; line-height: 1.1;
}
.hl__txt--black { background: #000; font-size: .9375rem; }
.hl__label {
  display: block; margin-top: 8px; overflow: hidden;
  font-size: .75rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis;
}

/* ==========================================================================
   TABS AND GRID
   ========================================================================== */
.tabs { display: flex; justify-content: center; gap: 60px; border-top: 1px solid var(--line); }
.tabs__tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 52px; margin-top: -1px; padding: 0 2px;
  border: 0; border-top: 1px solid transparent; background: none;
  color: var(--muted); font-size: .8125rem; font-weight: 600;
  transition: color .16s var(--ease-out);
}
.tabs__tab svg { width: 14px; height: 14px; }
.tabs__tab:hover { color: var(--ink); }
.tabs__tab[aria-selected="true"] { color: var(--ink); border-top-color: var(--ink); }
.tabs__tab:focus-visible { outline-offset: -4px; }
.panel:focus { outline: none; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.tile__btn {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
  padding: 0; border: 0; border-radius: 0; overflow: hidden; background: var(--zinc);
}
.tile__img { width: 100%; height: 100%; object-fit: cover; }
.tile__flag {
  position: absolute; top: 10px; right: 10px; width: 20px; height: 20px;
  color: #fff; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .45));
}
.tile__hover {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding: 14px; background: rgba(34, 26, 34, .34); color: #fff;
  font-size: .8125rem; font-weight: 600; letter-spacing: -.005em;
  opacity: 0; transition: opacity .18s var(--ease-out);
}
@media (hover: hover) {
  .tile__btn:hover .tile__hover { opacity: 1; }
}
.tile__btn:focus-visible { outline: 3px solid var(--plum); outline-offset: -3px; border-radius: 0; }
.tile__btn:focus-visible .tile__hover { opacity: 1; }

/* the nine new concept posts show only in the Redesign view: they have no original to compare */
[data-view="original"] .tile--new { display: none; }
.grid-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 0 14px; color: var(--muted); font-size: .8125rem; text-align: center;
}
.grid-note::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--burnt); }

.empty { max-width: 360px; margin: 0 auto; padding: 64px 0 72px; text-align: center; color: var(--muted); font-size: .875rem; }
.empty__icon { width: 56px; height: 56px; margin: 0 auto 16px; color: var(--ink); }
.empty__title { margin-bottom: 8px; color: var(--ink); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   NOTES AND DISCLAIMER
   ========================================================================== */
.foot { margin-top: 72px; border-top: 1px solid var(--line); background: var(--zinc); }
.foot__inner { max-width: var(--page); margin: 0 auto; padding: 48px 20px 40px; }
.system__title { font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.system__lede { max-width: 40em; margin-top: 10px; color: var(--muted); }
.system__lede strong { color: var(--ink); font-weight: 600; }
.system__sub { margin: 32px 0 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.system__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px;
  margin-top: 24px; font-size: .875rem; color: var(--muted);
}
.system__name { display: block; margin-bottom: 2px; color: var(--ink); font-weight: 600; font-size: .9375rem; }
.foot__legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.foot__concept { max-width: 64em; color: var(--muted); font-size: .8125rem; line-height: 1.55; }
.foot__concept strong { color: var(--ink); }
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: .8125rem; font-weight: 600; }

/* ==========================================================================
   POST VIEWER (modal)
   ========================================================================== */
.viewer {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: transparent; color: var(--ink);
}
.viewer::backdrop { background: rgba(20, 12, 20, .72); }
.viewer[open] { animation: viewer-in .22s var(--ease-out); }
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }

.viewer__wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 24px 72px;
}
.viewer__post {
  --media-h: min(calc(100vh - 64px), 860px);
  display: grid;
  grid-template-columns: calc(var(--media-h) * .8) 380px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "media head"
    "media body"
    "media foot";
  max-width: 100%;
  height: var(--media-h);
  overflow: hidden; border-radius: 6px; background: #fff;
}
.viewer__head {
  grid-area: head; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line);
}
.viewer__avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; background: var(--dusk); }
.viewer__user { flex: 1; min-width: 0; font-size: .875rem; font-weight: 600; letter-spacing: 0; }
.viewer__media {
  grid-area: media; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #0E0A0E;
}
.viewer__img { width: 100%; height: 100%; object-fit: contain; }
.viewer__body {
  grid-area: body; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px 20px; border-left: 1px solid var(--line);
}
.viewer__pos { color: var(--muted); font-size: .75rem; font-weight: 600; }
.viewer__caption { margin-top: 10px; font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.viewer__caption p + p { margin-top: 12px; }
.viewer__caption .caption__user { font-weight: 600; margin-right: 6px; }
.viewer__caption .caption__tag { color: var(--plum-ink); }
.viewer__note { margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--zinc); font-size: .8125rem; line-height: 1.5; }
.viewer__note-title { font-weight: 600; }
.viewer__note-text { margin-top: 2px; color: var(--muted); }
.viewer__foot {
  grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  font-size: .75rem;
}
.viewer__date { color: var(--muted); }
.viewer__link { font-weight: 600; }

.viewer__nav {
  position: absolute; top: 50%; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transition: transform .16s var(--ease-out), background-color .16s var(--ease-out);
}
.viewer__nav svg { width: 20px; height: 20px; }
.viewer__nav:hover { background: #fff; }
.viewer__nav:active { transform: scale(.94); }
.viewer__nav--prev { left: 12px; }
.viewer__nav--next { right: 12px; }
.viewer__close {
  position: absolute; top: 12px; right: 16px; z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: transparent; color: #fff;
}
.viewer__close svg { width: 26px; height: 26px; }
.viewer__close:hover { background: rgba(255, 255, 255, .12); }
.viewer__close:focus-visible { outline-color: #fff; }

/* ==========================================================================
   TABLET AND PHONE
   ========================================================================== */
@media (max-width: 1080px) {
  .viewer__wrap { padding: 20px 64px; }
  .viewer__post {
    --media-h: min(calc(100vh - 40px), 760px);
    grid-template-columns: calc(var(--media-h) * .8) minmax(280px, 340px);
  }
}

/* below this the viewer becomes a full-screen post, like the app */
@media (max-width: 900px) {
  .viewer { background: #fff; }
  .viewer::backdrop { background: #fff; }
  .viewer__wrap { display: block; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
  .viewer__post {
    display: grid; height: auto; max-width: 560px; margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "head" "media" "body" "foot";
    border-radius: 0;
  }
  .viewer__head { position: sticky; top: 0; z-index: 2; padding: 10px 60px 10px 14px; background: #fff; border-left: 0; }
  .viewer__media { aspect-ratio: 4 / 5; }
  .viewer__body { overflow: visible; border-left: 0; padding: 14px 16px 16px; }
  .viewer__foot { border-left: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .viewer__close { position: fixed; top: 4px; right: 6px; color: var(--ink); }
  .viewer__nav { width: 30px; height: 30px; margin-top: -15px; }
  .viewer__nav svg { width: 18px; height: 18px; }
  .viewer__nav--prev { left: 6px; }
  .viewer__nav--next { right: 6px; }
  .viewer__close:hover { background: var(--zinc); }
  .viewer__close:focus-visible { outline-color: var(--plum); }
}

@media (max-width: 735px) {
  :root { --gutter: 16px; }
  .bar__inner { height: 52px; }
  .bar__back span { display: none; }
  .bar__back { width: 44px; justify-content: center; margin-left: -10px; padding: 0; }
  .bar__back svg { width: 26px; height: 26px; }
  .bar__title { display: block; flex: 1; min-width: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; }

  .profile { padding: 16px 0 0; }
  .head {
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-areas:
      "avatar stats"
      "bio bio"
      "actions actions";
    column-gap: 20px;
    margin: 0 var(--gutter) 20px;
  }
  .head__avatar { padding: 0; }
  .avatar { width: 86px; height: 86px; }
  .head__user { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .head__stats { margin: 0; }
  .stats { justify-content: space-around; gap: 4px; text-align: center; }
  .stats li { display: flex; flex-direction: column; font-size: .8125rem; line-height: 1.25; }
  .stats__n { font-size: 1.0625rem; }
  .stats__note { margin-top: 6px; text-align: center; }
  .bio { margin-top: 14px; }
  .head__actions { margin-top: 14px; flex-wrap: nowrap; }
  .head__actions .btn { flex: 1 1 0; }

  .hl { margin-bottom: 18px; }
  .hl__list { gap: 10px; padding: 2px var(--gutter) 6px; }
  .hl__item { width: 74px; }
  .hl__ring { width: 66px; height: 66px; margin: 0 auto; padding: 3px; }
  .hl__txt { font-size: .625rem; padding: 4px; }
  .hl__label { margin-top: 5px; font-size: .75rem; font-weight: 400; }

  .tabs { justify-content: space-around; gap: 0; }
  .tabs__tab { flex: 1; justify-content: center; height: 46px; border-top: 0; margin: 0; border-bottom: 1px solid transparent; }
  .tabs__tab svg { width: 24px; height: 24px; }
  .tabs__tab[aria-selected="true"] { border-bottom-color: var(--ink); }
  .tabs__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .grid { gap: 2px; }
  .tile__flag { top: 6px; right: 6px; width: 16px; height: 16px; }
  .grid-note { justify-content: flex-start; margin: 0 var(--gutter) 10px; font-size: .75rem; text-align: left; }
  .tile__hover { display: none; }

  .foot { margin-top: 48px; }
  .foot__inner { padding: 36px var(--gutter) 32px; }
  .system__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}