/* ==========================================================================
   Hello — a personal profile on the fediverse.

   One column, one voice. The page is a single narrow measure so that reading it
   feels like reading a person rather than browsing a product, with a thread
   running down the left of the feed to tie the posts into one continuous
   record. Colour is used sparingly and only ever to mean "this is theirs", and
   the type is whatever the reader's own device already has.
   ========================================================================== */

/* Classic Twitter's palette, the one it used before the rebrand: white ground,
   #1DA1F2 for anything interactive, and the four greys everything else was
   built from. */
:root {
	/* ground */
	--paper: #ffffff;
	--paper-raised: #ffffff;
	--paper-sunken: #f5f8fa; /* extra extra light grey */
	/* ink */
	--ink: #14171a; /* black */
	--ink-2: #657786; /* dark grey */
	--ink-3: #aab8c2; /* light grey */
	/* hairlines */
	--line: #e1e8ed; /* extra light grey */
	--line-2: #edf1f4;
	/* accent — Twitter blue */
	--accent: #1da1f2;
	--accent-ink: #1a91da; /* the darker blue used for hover and link text */
	--accent-soft: rgba(29, 161, 242, 0.1);
	/* the profile header, in the flat blue Twitter filled it with when no banner
	   had been uploaded */
	--cover-1: #1da1f2;
	--cover-2: #1a91da;
	/* destructive actions and error toasts */
	--danger: #e0245e;
	--danger-soft: rgba(224, 36, 94, 0.1);

	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	/* Twitter was flat: surfaces are separated by hairlines, not elevation */
	--shadow: none;
	--shadow-lift: 0 0 0 1px var(--accent-soft);

	/* Nothing is downloaded: the page renders in whatever the reader's own device
	   already has, which is both the fastest possible first paint and the type
	   they are used to reading. Display type is the same stack, set heavier and
	   tighter — point --font-display at something else to reintroduce a
	   distinct face. */
	--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
		sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--font-display: var(--font-ui);
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	/* the one measure the whole site is built on */
	--column: 604px;
}

/* Twitter's "Dim" theme — the navy-grey dark mode, not the pure-black one */
@media (prefers-color-scheme: dark) {
	:root {
		--paper: #15202b;
		--paper-raised: #192734;
		--paper-sunken: #22303c;
		--ink: #ffffff;
		--ink-2: #8899a6;
		--ink-3: #6e767d;
		--line: #38444d;
		--line-2: #2c3843;
		--accent: #1d9bf0;
		--accent-ink: #1d9bf0;
		--accent-soft: rgba(29, 155, 240, 0.16);
		--cover-1: #1a6b9e;
		--cover-2: #145a86;
		--danger: #f4245e;
		--danger-soft: rgba(244, 36, 94, 0.16);
		--shadow: none;
		--shadow-lift: 0 0 0 1px var(--accent-soft);
	}
}

/* ---------- base ---------- */
* {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
a {
	color: inherit;
}
img {
	max-width: 100%;
}
[v-cloak] {
	display: none;
}
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------- the column ---------- */
.column {
	width: 100%;
	max-width: var(--column);
	margin-inline: auto;
	padding: 0 20px;
}

/* ---------- topbar ---------- */
.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--paper) 84%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--line-2);
}
.topbar-inner {
	width: 100%;
	max-width: var(--column);
	margin-inline: auto;
	padding: 9px 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}
/* the monogram: a stamp of the owner's initial */
.mark {
	width: 32px;
	height: 32px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: var(--accent);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 0.12s ease;
}
.mark:hover {
	transform: rotate(-4deg) scale(1.04);
}
.mark-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* segmented nav */
.nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: var(--radius-pill);
	background: var(--paper-sunken);
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}
.nav::-webkit-scrollbar {
	display: none;
}
.nav a {
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	color: var(--ink-2);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s, background 0.15s;
}
.nav a:hover {
	background: var(--accent-soft);
	color: var(--accent-ink);
}
.nav a.active,
.nav a.active:hover {
	background: var(--accent);
	color: #fff;
}

/* ---------- page heading (every page but home) ---------- */
.page-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.8rem;
	letter-spacing: -0.02em;
	margin: 26px 0 18px;
}

/* ---------- profile card ---------- */
.profile {
	margin: 20px 0 4px;
}
/* the flat blue header Twitter filled a profile with when no banner had been
   uploaded, so nothing here needs an image to maintain */
.cover {
	height: 124px;
	border-radius: var(--radius-lg);
	background: linear-gradient(180deg, var(--cover-1), var(--cover-2));
	position: relative;
	overflow: hidden;
}
.pfp {
	width: 88px;
	height: 88px;
	margin: -46px 0 0 4px;
	position: relative;
	display: grid;
	place-items: center;
	border-radius: 27px;
	border: 4px solid var(--paper);
	background: var(--paper-sunken);
	color: var(--accent);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 2.1rem;
	line-height: 1;
	text-transform: uppercase;
	overflow: hidden;
}
.pfp img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.profile-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.75rem;
	line-height: 1.15;
	letter-spacing: -0.025em;
	margin: 12px 0 1px;
}
.profile-handle {
	font-family: var(--font-mono);
	font-size: 0.84rem;
	color: var(--ink-3);
	word-break: break-all;
}
.profile-bio {
	margin: 12px 0 0;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--ink-2);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	max-width: 44ch;
}
.profile-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--accent-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.profile-link:hover {
	text-decoration: underline;
}
.profile-link::before {
	content: "";
	width: 13px;
	height: 13px;
	flex: none;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	/* a tiny globe: two arcs through a circle */
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
	opacity: 0.75;
}
.stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin-top: 16px;
	padding-top: 15px;
	border-top: 1px solid var(--line-2);
}
.stat {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	text-decoration: none;
}
.stat b {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.08rem;
	font-variant-numeric: tabular-nums;
}
.stat span {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}
a.stat:hover span {
	color: var(--accent-ink);
}

/* ---------- composer ---------- */
.composer {
	margin: 22px 0 6px;
	padding: 14px 16px 12px;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: box-shadow 0.2s, border-color 0.2s;
}
.composer:focus-within {
	border-color: color-mix(in srgb, var(--accent) 45%, transparent);
	box-shadow: var(--shadow-lift);
}
.composer-top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 2px;
}
.composer-who {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	color: var(--ink-3);
}
.char-count {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 0.76rem;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
.char-count.over {
	color: var(--accent);
	font-weight: 600;
}
textarea.composer-input {
	display: block;
	width: 100%;
	border: 0;
	background: none;
	padding: 0;
	margin: 6px 0 10px;
	resize: none;
	overflow: hidden;
	outline: none;
	color: inherit;
	font-family: inherit;
	font-size: 1.08rem;
	line-height: 1.55;
	min-height: 2.6em;
}
textarea.composer-input::placeholder {
	color: var(--ink-3);
}
.composer-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line-2);
}
/* the Post button sits at the far end, whatever else joins the row */
.composer-actions button {
	margin-left: auto;
}
/* overrides the uppercase form-label styling: this one is a button, not a caption */
.attach {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 0;
	padding: 5px 11px 5px 9px;
	border-radius: var(--radius-pill);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink-2);
	cursor: pointer;
	user-select: none;
	transition: background 0.15s, color 0.15s;
}
.attach:hover {
	background: var(--accent-soft);
	color: var(--accent-ink);
}
.attach svg {
	width: 16px;
	height: 16px;
	flex: none;
}
.thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
.thumb {
	position: relative;
	width: 92px;
	height: 92px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--paper-sunken);
}
.thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.thumb .remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 20px;
	height: 20px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(20, 16, 14, 0.72);
	color: #fff;
	font-size: 0.85rem;
	line-height: 1;
	text-decoration: none;
	backdrop-filter: blur(4px);
}

/* ---------- feed ---------- */
.feed {
	margin-top: 28px;
}
/* Each post is a rail plus a body. The rail carries either a node (the owner's
   own posts, threaded together down the page) or the author's avatar (posts
   pulled in from elsewhere). */
.post {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 14px;
	padding-bottom: 4px;
}
.rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 7px;
}
.node {
	width: 11px;
	height: 11px;
	flex: none;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-soft);
}
.thread {
	flex: 1;
	width: 2px;
	min-height: 12px;
	margin: 8px 0 0;
	border-radius: 2px;
	background: linear-gradient(var(--line), var(--line-2));
}
.post:last-child .thread {
	background: linear-gradient(var(--line), transparent);
}
.avatar {
	width: 36px;
	height: 36px;
	flex: none;
	position: relative;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--accent-soft);
	color: var(--accent-ink);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.95rem;
	text-transform: uppercase;
	text-decoration: none;
	overflow: hidden;
}
.avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.post-main {
	min-width: 0;
	padding-bottom: 22px;
}
.boost {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 6px;
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--ink-3);
}
.boost a {
	color: inherit;
}
.post-meta {
	display: flex;
	align-items: baseline;
	gap: 7px;
	min-width: 0;
	margin-bottom: 3px;
}
.post-author {
	font-weight: 650;
	font-size: 0.95rem;
	text-decoration: none;
	white-space: nowrap;
}
.post-author:hover {
	text-decoration: underline;
}
.post-handle {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	color: var(--ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.post-time {
	margin-left: auto;
	flex: none;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	color: var(--ink-3);
	text-decoration: none;
}
.post-time:hover {
	color: var(--accent-ink);
}
.post-body {
	font-size: 1.05rem;
	line-height: 1.6;
	overflow-wrap: break-word;
}
.post-body p {
	margin: 0 0 0.62em;
}
.post-body p:last-child {
	margin-bottom: 0;
}
.post-body a {
	color: var(--accent-ink);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.post-body a:hover {
	border-bottom-color: currentColor;
}
.post-body blockquote {
	margin: 0.6em 0;
	padding-left: 0.9em;
	border-left: 2px solid var(--line);
	color: var(--ink-2);
}
.post-body pre,
.post-body code {
	font-family: var(--font-mono);
	font-size: 0.9em;
}
.post-body pre {
	overflow-x: auto;
	padding: 0.7em 0.9em;
	background: var(--paper-sunken);
	border-radius: var(--radius-sm);
}
.post-body ul,
.post-body ol {
	margin: 0 0 0.62em;
	padding-left: 1.3em;
}

/* media */
.media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
	margin-top: 11px;
	border-radius: var(--radius);
	overflow: hidden;
}
.media a {
	display: block;
	line-height: 0;
	background: var(--paper-sunken);
}
.media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}
.media a:only-child {
	grid-column: span 2;
}
.media a:only-child img {
	aspect-ratio: auto;
	max-height: 30rem;
	object-fit: contain;
	background: var(--paper-sunken);
}
/* three images: the first spans the top */
.media a:first-child:nth-last-child(3) {
	grid-column: span 2;
}

.post-actions {
	display: flex;
	gap: 4px;
	margin-top: 10px;
	margin-left: -9px;
}
.post-actions a {
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	font-size: 0.73rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-3);
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.post-actions a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.post-actions a:hover {
	background: var(--paper-sunken);
	color: var(--ink);
}
.post-actions a.danger:hover {
	background: var(--danger-soft);
	color: var(--danger);
}
/* the like: an outlined heart that fills and turns red once it is given */
.post-actions a.like svg {
	width: 14px;
	height: 14px;
	flex: none;
}
.post-actions a.like:hover,
.post-actions a.like.on {
	background: var(--danger-soft);
	color: var(--danger);
}
.post-actions a.like.on svg {
	animation: like-pop 0.28s ease;
}
@keyframes like-pop {
	0% {
		transform: scale(0.7);
	}
	60% {
		transform: scale(1.25);
	}
	100% {
		transform: scale(1);
	}
}

/* ---------- accounts (following / followers) ---------- */
.list-head {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 30px 0 4px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -0.015em;
}
.list-head .count {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--ink-3);
}
.account {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line-2);
}
.account .avatar {
	width: 40px;
	height: 40px;
	border-radius: 13px;
	font-size: 1rem;
}
.account-id {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}
.account-name {
	font-weight: 650;
	font-size: 0.95rem;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.account-handle {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	color: var(--ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chip {
	flex: none;
	padding: 2px 9px;
	border-radius: var(--radius-pill);
	background: var(--paper-sunken);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.unfollow {
	flex: none;
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line);
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--ink-2);
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Twitter turned a "Following" button red on hover, to say what clicking does */
.unfollow:hover {
	background: var(--danger-soft);
	border-color: transparent;
	color: var(--danger);
}

/* ---------- forms ---------- */
.card {
	margin: 22px 0;
	padding: 20px;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
label {
	display: block;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 6px;
}
input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"] {
	display: block;
	width: 100%;
	padding: 11px 14px;
	margin-bottom: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--paper);
	color: var(--ink);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder {
	color: var(--ink-3);
}
button {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid var(--accent);
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: #fff;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 650;
	cursor: pointer;
	transition: transform 0.1s ease, opacity 0.15s;
}
button:hover {
	opacity: 0.9;
}
button:active {
	transform: translateY(1px);
}
button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.hint {
	font-size: 0.86rem;
	color: var(--ink-3);
}

/* ---------- empty state ---------- */
.empty {
	text-align: center;
	padding: 54px 20px 60px;
	color: var(--ink-2);
}
/* a dashed stamp, echoing the monogram but unfilled */
.empty-mark {
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 17px;
	border: 2px dashed var(--line);
	display: grid;
	place-items: center;
}
.empty-mark::after {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--line);
}
.empty h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -0.015em;
	margin: 0 0 5px;
	color: var(--ink);
}
.empty p {
	margin: 0;
	font-size: 0.94rem;
	max-width: 30ch;
	margin-inline: auto;
}
.empty p.empty-action {
	margin-top: 18px;
}

/* ---------- loader ---------- */
.loader {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 34px 0;
}
.loader span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ink-3);
	animation: blink 1.1s ease-in-out infinite;
}
.loader span:nth-child(2) {
	animation-delay: 0.16s;
}
.loader span:nth-child(3) {
	animation-delay: 0.32s;
}
@keyframes blink {
	0%,
	80%,
	100% {
		opacity: 0.22;
		transform: translateY(0);
	}
	40% {
		opacity: 1;
		transform: translateY(-3px);
	}
}
.more {
	display: block;
	width: 100%;
	margin: 6px 0 28px;
	background: none;
	border-color: var(--line);
	color: var(--ink-2);
}
.more:hover {
	background: var(--paper-sunken);
	opacity: 1;
}

/* ---------- toast ---------- */
#toast {
	position: fixed;
	z-index: 40;
	left: 50%;
	bottom: 24px;
	/* parked fully clear of the viewport, including its own bottom offset */
	transform: translate(-50%, calc(100% + 32px));
	max-width: calc(100vw - 32px);
	padding: 11px 20px;
	border-radius: var(--radius-pill);
	/* Twitter's snackbar: blue for confirmations, red when something went wrong */
	background: var(--accent);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 500;
	text-align: center;
	transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
	cursor: pointer;
}
#toast.show {
	transform: translate(-50%, 0);
}
#toast.error {
	background: var(--danger);
}

/* ---------- footer ---------- */
.foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	padding: 34px 0 46px;
	margin-top: 20px;
	border-top: 1px solid var(--line-2);
	font-size: 0.78rem;
	color: var(--ink-3);
}
.foot a {
	color: inherit;
	text-decoration: none;
}
.foot a:hover {
	color: var(--accent-ink);
}
.foot .sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--line);
}

/* ---------- small screens ---------- */
@media (max-width: 480px) {
	.column,
	.topbar-inner {
		padding-inline: 16px;
	}
	.mark-name {
		display: none;
	}
	.cover {
		height: 104px;
		border-radius: var(--radius);
	}
	.pfp {
		width: 76px;
		height: 76px;
		margin-top: -40px;
		border-radius: 23px;
		font-size: 1.8rem;
	}
	.profile-name {
		font-size: 1.5rem;
	}
	.post {
		grid-template-columns: 32px minmax(0, 1fr);
		gap: 11px;
	}
	.avatar {
		width: 32px;
		height: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}