/*
 * The profile page. Loaded before paint.css, so the rules that must beat the painted ground carry its prefix
 * (html body.pk-obsidian) and one more class and nothing here is forced.
 *
 *   header   one compact card: a 72px avatar, the name, @username, "N followers · N following" with a chevron on the right of
 *            that row, and one row of buttons. About 190px tall at 390px wide. Everything else (the bio, role, place, the
 *            Clubs they run, links, the Discover and open-to-collaborate marks, "Worked with") is behind the chevron and
 *            opens in place. A solid pane in every Look: warm paper with ink in Matinee, near-black in Paint and Glass.
 *            No text-shadow anywhere on this page.
 *   buttons  the primary (Follow, on someone else's profile) is the only ruby one; Following, Message, Edit profile and
 *            My card are secondary, equal widths, 44px; the ⋯ menu holds the rest and is never clipped
 *   pane     tabs, the pin hint and the posts sit on one neutral near-black pane (tile-grid.css draws the tiles)
 * Spacing 4, 8, 12, 16, 24; radii 26, 18, 12; one sans family.
 */

:root {
  --pk-head-pane: #13121a;
  --pk-head-ink: #f5f2f1;
  --pk-head-muted: #c6bfc4;
  --pk-head-line: rgba(245, 242, 241, .3);
  --pk-head-rim: rgba(255, 255, 255, .16);
  --pk-head-star: #e9b44c;
  --pk-head-menu: #17141c;
}
:root[data-look="matinee"] {
  --pk-head-pane: #fffaf1;
  --pk-head-ink: #1d1611;
  --pk-head-muted: #584d44;
  --pk-head-line: rgba(40, 28, 20, .52);
  --pk-head-rim: rgba(40, 28, 20, .2);
  --pk-head-star: #8a5805;
  --pk-head-menu: #fffaf1;
}

html body.pk-obsidian .pk-profile.pk-creator { position: relative; padding: 0 0 96px; }
html body.pk-obsidian .pk-creator-cover { height: clamp(96px, 22vw, 180px); margin: 0; overflow: hidden; background: var(--pk-tile-pane); }
html body.pk-obsidian .pk-creator-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body.pk-obsidian .pk-creator-frame { display: grid; gap: 12px; width: min(100%, 720px); margin: 0 auto; padding: 16px 16px 0; box-sizing: border-box; }
html body.pk-obsidian .pk-creator-cover + .pk-creator-frame { padding-top: 12px; }

/* The header card. Position and z-index put its ⋯ menu above the pane below; overflow stays visible so the menu is never cut. */
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head { position: relative; z-index: 2; display: grid; gap: 12px; margin: 0; padding: 16px; box-sizing: border-box; border: 0; border-radius: 18px; background: var(--pk-head-pane); color: var(--pk-head-ink); box-shadow: none; overflow: visible; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-identity { display: grid; gap: 4px; min-width: 0; padding: 0; }

html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head .pk-creator-avatar { position: relative; flex: none; display: grid; place-items: center; box-sizing: border-box; width: 72px; height: 72px; margin: 0; padding: 0; border: 0; border-radius: 18px; overflow: hidden; box-shadow: none; text-shadow: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head .pk-creator-avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--pk-head-rim); pointer-events: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head .pk-creator-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head .pk-creator-avatar--initial { filter: saturate(.55); }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head .pk-creator-initials { font-size: 28px; font-weight: var(--pk-weight-bold, 700); letter-spacing: 0; text-shadow: none; }

html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head h1.pk-creator-name { display: flex; align-items: center; gap: 4px 8px; min-width: 0; margin: 0; font-size: 22px; font-weight: var(--pk-weight-bold, 700); letter-spacing: -.01em; line-height: 1.2; text-shadow: none; -webkit-text-stroke: 0; color: var(--pk-head-ink); }
/* One sans family on this card: the painted ground's body type does not reach in. */
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head, html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head :is(h1, p, a, span, button, summary, strong) { font-family: var(--fs-font, inherit); }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-name .pk-verified, html body.pk-obsidian .pk-profile.pk-creator .pk-creator-name .pk-official-mark { flex: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-mark { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; color: var(--pk-head-star); }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-mark .pk-icon { width: 16px; height: 16px; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-open-dot { display: block; width: 9px; height: 9px; border-radius: 50%; background: #34c759; box-shadow: none; }
:root[data-look="matinee"] .pk-creator .pk-creator-open-dot { background: #1f6a43; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-handle { margin: 0; overflow: hidden; color: var(--pk-head-muted); font-size: 14px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; text-shadow: none; }

/* The counts row: "N followers · N following" on the left, the chevron on the right. The 44px chevron overhangs the row by the
   12px gaps above and below, so the card stays short and the target stays 44px. The counts get the same 44px reach. */
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-glance { display: grid; min-width: 0; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-meta { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; min-width: 0; color: var(--pk-head-muted); font-size: 14px; line-height: 1.4; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-counts { display: flex; flex: 0 1 auto; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-width: 0; margin: 0; color: inherit; font-size: inherit; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-counts > span { display: inline; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-counts a { display: inline; margin: -12px 0; padding: 12px 0; color: inherit; text-decoration: none; white-space: nowrap; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-counts strong { color: var(--pk-head-ink); font-weight: var(--pk-weight-bold, 700); font-variant-numeric: tabular-nums; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-expand { display: grid; flex: none; place-items: center; box-sizing: border-box; width: 44px; height: 44px; margin: -12px 0 -12px auto; padding: 0; border: 0; border-radius: 999px; background: none; box-shadow: none; color: var(--pk-head-ink); text-shadow: none; cursor: pointer; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-expand .pk-icon { width: 24px; height: 24px; transition: transform 200ms ease; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-expand[aria-expanded="true"] .pk-icon { transform: rotate(180deg); }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-expand:focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: var(--pk-focus-offset); }

/* The details: `hidden` while closed. The opening script shows the region, lays it out and adds .is-open, and the body comes in over
   200 ms (opacity and a few pixels of transform: nothing else may animate, test/static.test.mjs). The card's height changes at once. */
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-details { display: block; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-details[hidden] { display: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-details-body { display: grid; justify-items: start; gap: 8px; min-width: 0; padding: 12px 0 0; opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease, transform 200ms ease; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-details.is-open .pk-creator-details-body { opacity: 1; transform: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-bio { margin: 0; color: var(--pk-head-ink); font-size: 15px; line-height: 1.45; max-width: none; overflow-wrap: anywhere; text-shadow: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-bio a { color: inherit; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-fact { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; color: var(--pk-head-muted); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; text-shadow: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-fact .pk-icon { flex: none; width: 16px; height: 16px; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-fact .pk-creator-craft { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-links { display: grid; justify-items: start; gap: 0; min-width: 0; max-width: 100%; margin: -8px 0; }
html body.pk-obsidian .pk-profile.pk-creator :is(.pk-creator-runs, .pk-creator-link) { display: flex; align-items: center; gap: 4px; box-sizing: border-box; max-width: 100%; min-height: 44px; margin: 0; color: var(--pk-head-ink); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; text-shadow: none; }
html body.pk-obsidian .pk-profile.pk-creator :is(.pk-creator-runs, .pk-creator-link):focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: var(--pk-focus-offset); }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-link { gap: 8px; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-link .pk-icon { flex: none; width: 16px; height: 16px; color: var(--pk-head-muted); }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-link span, html body.pk-obsidian .pk-profile.pk-creator .pk-creator-runs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The "Worked with" and "People you brought" lines (growth-entry.ts) land at the end of the details, plain, not as a pane of their own. */
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-details .pk-growth-profile { display: grid; gap: 8px; margin: 0; padding: 0; border-radius: 0; background: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-details :is(.pk-growth-worked, .pk-growth-brought) { display: block; width: auto; margin: 0; padding: 0; border-radius: 0; background: none; color: var(--pk-head-muted); font-size: 14px; line-height: 1.4; text-shadow: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-details .pk-growth-brought a { color: var(--pk-head-ink); text-decoration: none; }
/* Without scripts there is no button to press: the details are simply there. */
@media (scripting: none) {
  html body.pk-obsidian .pk-profile.pk-creator .pk-creator-details, html body.pk-obsidian .pk-profile.pk-creator .pk-creator-details[hidden] { display: block; }
  html body.pk-obsidian .pk-profile.pk-creator .pk-creator-details-body { opacity: 1; transform: none; }
  html body.pk-obsidian .pk-profile.pk-creator .pk-creator-expand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body.pk-obsidian .pk-profile.pk-creator .pk-creator-details-body, html body.pk-obsidian .pk-profile.pk-creator .pk-creator-expand .pk-icon { transition-duration: 0s; }
}
html.pk-save-data body.pk-obsidian .pk-profile.pk-creator .pk-creator-details-body, html.pk-save-data body.pk-obsidian .pk-profile.pk-creator .pk-creator-expand .pk-icon { transition-duration: 0s; }

/* One row of buttons: equal widths, 44px, the ⋯ at the end of the same row. */
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-side { display: grid; gap: 8px; padding: 0; justify-items: stretch; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head .pk-creator-actions > :is(.fs-button, a.fs-button, button.fs-button) { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; box-sizing: border-box; min-width: 0; min-height: 44px; margin: 0; padding: 0 12px; border-radius: 12px; font-size: 15px; font-weight: 700; line-height: 1.1; text-decoration: none; text-shadow: none; white-space: nowrap; }
/* Secondary is a bare text button, everywhere (F29); the one ruby fill keeps the Look's own. */
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head .pk-creator-actions > :is(.fs-button, a.fs-button, button.fs-button):not(.fs-button--primary) { border: 0; background: transparent; box-shadow: none; color: var(--pk-head-ink); }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head .pk-creator-actions > .pk-creator-invite { order: 9; flex-basis: 100%; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-follow-status, html body.pk-obsidian .pk-profile.pk-creator .pk-creator-invite-status, html body.pk-obsidian .pk-profile.pk-creator .pk-profile-mute-status { margin: 0; color: var(--pk-head-muted); font-size: 13px; line-height: 1.4; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-follow-status:empty, html body.pk-obsidian .pk-profile.pk-creator .pk-creator-invite-status:empty, html body.pk-obsidian .pk-profile.pk-creator .pk-profile-mute-status:empty { display: none; }

/* The ⋯ menu. The pane's look comes from the shared menu rules; this sizes it and its items. */
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-more { position: relative; flex: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-more > summary { display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; margin: 0; padding: 0; list-style: none; border: 0; border-radius: 999px; background: transparent; color: var(--pk-head-ink); box-shadow: none; cursor: pointer; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-more > summary::-webkit-details-marker { display: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-more > summary .pk-icon { width: 20px; height: 20px; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-more > summary:focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: var(--pk-focus-offset); }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-more nav { position: absolute; right: 0; left: auto; top: calc(100% + 8px); z-index: 40; display: grid; gap: 2px; box-sizing: border-box; width: min(264px, calc(100vw - 32px)); min-width: 0; max-width: calc(100vw - 32px); padding: 8px; border: 1px solid var(--pk-head-line); border-radius: 18px; background: var(--pk-head-menu); color: var(--pk-head-ink); }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-more nav :is(a, button), html body.pk-obsidian .pk-profile.pk-creator .pk-creator-more nav .fs-button { display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--pk-head-ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; text-align: left; text-decoration: none; text-shadow: none; cursor: pointer; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-more nav :is(a, button):focus-visible { background: color-mix(in srgb, var(--pk-head-ink) 10%, transparent); outline-offset: -2px; }
@media (hover: hover) { html body.pk-obsidian .pk-profile.pk-creator .pk-creator-more nav :is(a, button):hover { filter: brightness(1.08); } }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-menu-notes { display: grid; gap: 4px; padding: 8px 12px 12px; border-bottom: 1px solid var(--pk-head-line); }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-menu-notes p { margin: 0; color: var(--pk-head-muted); font-size: 13px; line-height: 1.4; }
html body.pk-obsidian .pk-profile.pk-creator .pk-creator-more nav .pk-creator-menu-notes a { display: inline; width: auto; min-height: 0; padding: 0; border-radius: 0; color: var(--pk-head-ink); font-weight: 600; text-decoration: none; }

/* The pane under the header: tabs, the pin hint, the posts. Neutral near-black in every Look, so its own ink is light. */
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel { display: grid; margin: 0; padding: 0; color: #f5f2f1; color-scheme: dark; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-tabs { display: flex; flex-wrap: nowrap; gap: 0; width: auto; margin: 0; padding: 4px 8px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-tabs a { display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--pk-tile-quiet); font-size: 14px; font-weight: 600; text-decoration: none; text-shadow: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-tabs a[aria-current="page"] { color: var(--pk-tile-ink); font-weight: var(--pk-weight-bold, 700); }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-tab-count { margin-left: 4px; color: var(--pk-tile-quiet); font-weight: 500; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-profile-hint { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 0 4px 0 16px; color: var(--pk-tile-quiet); font-size: 13px; line-height: 1.4; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-profile-hint[hidden] { display: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-profile-hint-close { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; box-shadow: none; color: inherit; cursor: pointer; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-profile-hint-close .pk-icon { width: 16px; height: 16px; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-tab { display: block; width: auto; margin: 0; padding: 0; background: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-more-link { display: flex; justify-content: center; margin: 0; padding: 4px 0 12px; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-fallback { margin: 0; padding: 12px 16px 4px; color: var(--pk-tile-quiet); font-size: 14px; }

/* An empty tab: one quiet sentence and one small act. */
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-empty { display: grid; justify-items: center; gap: 12px; padding: 40px 24px; text-align: center; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-empty p { margin: 0; color: var(--pk-tile-quiet); font-size: 15px; line-height: 1.5; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-empty-hint { color: var(--pk-tile-faint); }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-empty .fs-button { min-height: 44px; padding: 0 24px; border-radius: 999px; text-shadow: none; }
html body.pk-obsidian .pk-profile.pk-creator .pk-profile-panel .pk-creator-about { padding: 16px; }

/* Notes and Credits: plain rows. A small picture when the post has one, its first words, who and when. */
.pk-tile-list { display: grid; margin: 0; padding: 0 16px 8px; list-style: none; }
.pk-tile-row { margin: 0; padding: 0; list-style: none; }
.pk-tile-row + .pk-tile-row { border-top: 1px solid var(--pk-tile-line); }
.pk-tile-row-link { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 12px 0; color: inherit; text-decoration: none; }
.pk-tile-row-link:focus-visible { outline: var(--pk-focus-width) solid var(--pk-focus); outline-offset: var(--pk-focus-offset); }
.pk-tile-row-pic { position: relative; flex: none; width: 56px; aspect-ratio: var(--pk-tile-ratio, 4 / 5); overflow: hidden; background: var(--pk-tile-blank); }
.pk-tile-row-body { display: grid; gap: 4px; min-width: 0; }
.pk-tile-row-who { color: var(--pk-tile-quiet); font-size: 12px; line-height: 1.4; }
.pk-tile-row-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.pk-tile-row-when { color: var(--pk-tile-faint); font-size: 12px; line-height: 1.4; }

@media (min-width: 760px) {
  html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head { padding: 24px; }
  html body.pk-obsidian .pk-profile.pk-creator .pk-creator-head .pk-creator-avatar { width: 88px; height: 88px; }
}