/* Personal Member Hub — front-end account and showcase UI */

.hub-page,
.showcase-page,
.blog-page {
    min-height: 100vh;
    color: #1c261f;
    background: #f3eee5;
}

.hub-shell,
.showcase-shell,
.blog-shell {
    width: min(calc(100% - 2 * var(--page-gutter)), 78rem);
    margin: 0 auto;
}

.hub-page {
    position: relative;
    display: grid;
    align-items: center;
    padding: calc(var(--header-height) + 3.5rem) 0 clamp(4rem, 8vh, 7rem);
    overflow: hidden;
}

.hub-page::before,
.hub-page::after {
    content: "";
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.hub-page::before {
    top: -18rem;
    right: -12rem;
    width: 38rem;
    height: 38rem;
    border: 6rem solid rgba(205, 230, 75, .1);
}

.hub-page::after {
    left: -8rem;
    bottom: -10rem;
    width: 26rem;
    height: 26rem;
    border: 1px solid rgba(28, 38, 31, .12);
    box-shadow: inset 0 0 0 3.5rem rgba(255, 255, 255, .18);
}

.hub-shell {
    position: relative;
    z-index: 2;
}

.profile-page .hub-shell {
    width: min(calc(100% - 2 * var(--page-gutter)), 72rem);
}

.auth-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(24rem, .7fr);
    gap: clamp(3rem, 8vw, 9rem);
    align-items: center;
}

.auth-intro {
    max-width: 42rem;
}

.hub-eyebrow,
.showcase-eyebrow,
.blog-eyebrow {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 0 0 1.5rem;
    color: #d6533b;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.hub-eyebrow::before,
.showcase-eyebrow::before,
.blog-eyebrow::before {
    content: "";
    width: 2.8rem;
    height: 1px;
    background: currentColor;
}

.hub-title,
.showcase-title,
.blog-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(3.4rem, 8vw, 8.2rem);
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.065em;
}

.hub-lead {
    max-width: 38rem;
    margin: 2rem 0 0;
    color: rgba(28, 38, 31, .68);
    font-size: clamp(.98rem, 1.35vw, 1.12rem);
    line-height: 1.95;
}

.auth-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    margin: 2.6rem 0 0;
    padding: 0;
    list-style: none;
}

.auth-points li {
    padding-top: .9rem;
    border-top: 1px solid rgba(28, 38, 31, .2);
    color: rgba(28, 38, 31, .7);
    font-size: .75rem;
    letter-spacing: .06em;
}

.hub-card {
    position: relative;
    padding: clamp(1.5rem, 3.5vw, 2.8rem);
    border: 1px solid rgba(28, 38, 31, .14);
    border-radius: 1.6rem;
    background: rgba(255, 253, 248, .82);
    box-shadow: 0 2rem 5rem rgba(20, 31, 22, .08);
    backdrop-filter: blur(18px);
}

.hub-card--dark {
    color: #f7f3e9;
    border-color: rgba(255,255,255,.12);
    background: #121a14;
}

.auth-tabs {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    width: 100%;
    margin: 0 0 1.7rem;
    padding: .25rem;
    border: 1px solid rgba(28, 38, 31, .14);
    border-radius: 999px;
    background: rgba(28, 38, 31, .05);
}

.auth-tab-indicator {
    position: absolute;
    inset: .25rem auto .25rem .25rem;
    z-index: 0;
    width: calc((100% - .75rem) / 2);
    border-radius: 999px;
    background: #172019;
    box-shadow: 0 .35rem 1rem rgba(18, 26, 20, .12);
    transform: translateX(0);
    transition: transform .52s var(--ease-out), background-color .35s ease;
    pointer-events: none;
}

.auth-tabs--register .auth-tab-indicator {
    transform: translateX(calc(100% + .25rem));
}

.auth-tabs a {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: .48rem .8rem;
    border-radius: 999px;
    color: rgba(28, 38, 31, .62);
    text-align: center;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .08em;
    transition: color .52s var(--ease-out);
}

.auth-tabs a[data-auth-target="login"] {
    view-transition-name: auth-tab-login;
}

.auth-tabs a[data-auth-target="register"] {
    view-transition-name: auth-tab-register;
}

.auth-tabs a.is-active {
    color: #f7f3e9;
}

.hub-card--dark .auth-tabs {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
}

.hub-card--dark .auth-tabs a {
    color: rgba(255, 255, 255, .58);
}

.hub-card--dark .auth-tab-indicator {
    background: #e7ff57;
    box-shadow: 0 .35rem 1.2rem rgba(231, 255, 87, .12);
}

.hub-card--dark .auth-tabs a.is-active {
    color: #111711;
}

.auth-tabs a:not(.is-active):hover,
.auth-tabs a:not(.is-active):focus-visible {
    color: #182119;
}

.hub-card--dark .auth-tabs a:not(.is-active):hover,
.hub-card--dark .auth-tabs a:not(.is-active):focus-visible {
    color: #fff;
}

.auth-page .auth-intro {
    view-transition-name: auth-intro;
}

.auth-page .hub-card {
    display: flex;
    flex-direction: column;
    min-height: 43rem;
    view-transition-name: auth-card;
}

.auth-page .hub-form {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.auth-page .hub-form .hub-button {
    margin-top: auto;
}

.auth-page .auth-tab-indicator {
    view-transition-name: auth-tab-indicator;
}

html[data-auth-loading] .auth-tabs {
    pointer-events: none;
}

html[data-auth-transition]::view-transition-old(root),
html[data-auth-transition]::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

html[data-auth-transition]::view-transition-group(auth-intro),
html[data-auth-transition]::view-transition-group(auth-card),
html[data-auth-transition]::view-transition-group(auth-tab-indicator),
html[data-auth-transition]::view-transition-group(auth-tab-login),
html[data-auth-transition]::view-transition-group(auth-tab-register) {
    animation-duration: .56s;
    animation-timing-function: var(--ease-out);
}

html[data-auth-direction="forward"]::view-transition-old(auth-intro),
html[data-auth-direction="forward"]::view-transition-old(auth-card) {
    animation: auth-exit-forward .3s cubic-bezier(.4, 0, 1, 1) both;
}

html[data-auth-direction="forward"]::view-transition-new(auth-intro),
html[data-auth-direction="forward"]::view-transition-new(auth-card) {
    animation: auth-enter-forward .5s .04s var(--ease-out) both;
}

html[data-auth-direction="backward"]::view-transition-old(auth-intro),
html[data-auth-direction="backward"]::view-transition-old(auth-card) {
    animation: auth-exit-backward .3s cubic-bezier(.4, 0, 1, 1) both;
}

html[data-auth-direction="backward"]::view-transition-new(auth-intro),
html[data-auth-direction="backward"]::view-transition-new(auth-card) {
    animation: auth-enter-backward .5s .04s var(--ease-out) both;
}

html[data-auth-transition]::view-transition-old(auth-tab-login),
html[data-auth-transition]::view-transition-new(auth-tab-login),
html[data-auth-transition]::view-transition-old(auth-tab-register),
html[data-auth-transition]::view-transition-new(auth-tab-register) {
    animation-duration: .52s;
    animation-timing-function: var(--ease-out);
    animation-fill-mode: both;
    mix-blend-mode: normal;
}

html[data-auth-transition]::view-transition-old(auth-tab-login),
html[data-auth-transition]::view-transition-old(auth-tab-register) {
    animation-name: auth-tab-color-out;
}

html[data-auth-transition]::view-transition-new(auth-tab-login),
html[data-auth-transition]::view-transition-new(auth-tab-register) {
    animation-name: auth-tab-color-in;
}

@keyframes auth-tab-color-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes auth-tab-color-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes auth-exit-forward {
    to {
        opacity: 0;
        transform: translateX(-2rem) scale(.985);
    }
}

@keyframes auth-enter-forward {
    from {
        opacity: 0;
        transform: translateX(2.4rem) scale(.985);
    }
}

@keyframes auth-exit-backward {
    to {
        opacity: 0;
        transform: translateX(2rem) scale(.985);
    }
}

@keyframes auth-enter-backward {
    from {
        opacity: 0;
        transform: translateX(-2.4rem) scale(.985);
    }
}

.hub-card-title {
    margin: 0 0 .45rem;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    font-weight: 500;
    line-height: 1.2;
}

.hub-card-subtitle {
    margin: 0 0 1.8rem;
    color: rgba(28, 38, 31, .58);
    font-size: .86rem;
}

.hub-card--dark .hub-card-subtitle {
    color: rgba(255,255,255,.6);
}

.hub-form {
    display: grid;
    gap: 1.15rem;
}

.hub-field {
    display: grid;
    gap: .48rem;
}

.hub-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.hub-label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.hub-field small,
.hub-form-note {
    color: rgba(28, 38, 31, .56);
    font-size: .72rem;
    line-height: 1.6;
}

.hub-card--dark .hub-field small,
.hub-card--dark .hub-form-note {
    color: rgba(255,255,255,.52);
}

.rename-card-note {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .35rem .8rem;
}

.rename-card-note strong {
	color: #236143;
}

.rename-card-note.is-empty strong {
	color: #973a2b;
}

.hub-input,
.hub-select,
.hub-textarea {
    width: 100%;
    border: 1px solid rgba(28, 38, 31, .2);
    border-radius: .85rem;
    outline: 0;
    color: #182119;
    background: rgba(255,255,255,.72);
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.hub-input,
.hub-select {
    min-height: 3.2rem;
    padding: .75rem .95rem;
}

.hub-textarea {
    min-height: 18rem;
    padding: 1rem;
    resize: vertical;
    line-height: 1.8;
}

.hub-input:focus,
.hub-select:focus,
.hub-textarea:focus {
    border-color: #ca5038;
    background: #fff;
    box-shadow: 0 0 0 .22rem rgba(202, 80, 56, .12);
}

.hub-input[readonly] {
	cursor: not-allowed;
	color: rgba(24, 33, 25, .58);
	background: rgba(28, 38, 31, .06);
}

.hub-card--dark .hub-input,
.hub-card--dark .hub-select,
.hub-card--dark .hub-textarea {
    color: #fff;
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
}

.hub-card--dark .hub-input:focus,
.hub-card--dark .hub-select:focus,
.hub-card--dark .hub-textarea:focus {
    border-color: #e7ff57;
    background: rgba(255,255,255,.1);
    box-shadow: 0 0 0 .22rem rgba(231,255,87,.1);
}

.hub-check {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: rgba(28, 38, 31, .65);
    font-size: .82rem;
}

.hub-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    cursor: pointer;
    accent-color: #e7ff57;
}

.hub-check input[type="checkbox"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: .2rem;
}

.hub-card--dark .hub-check {
    color: rgba(255, 255, 255, .82);
}

.hub-button,
.hub-button-secondary,
.hub-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 3.15rem;
    padding: .78rem 1.25rem;
    border: 1px solid #182119;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .07em;
    transition: transform .3s var(--ease-out), color .3s ease, background .3s ease, border-color .3s ease;
}

.hub-button {
    color: #f8f4eb;
    background: #182119;
}

.hub-button::after {
    content: "→";
    font-size: 1rem;
}

.hub-button:hover,
.hub-button:focus-visible,
.hub-button-secondary:hover,
.hub-button-secondary:focus-visible,
.hub-link-button:hover,
.hub-link-button:focus-visible {
    transform: translateY(-2px);
}

.hub-button:hover,
.hub-button:focus-visible {
    color: #182119;
    border-color: #e7ff57;
    background: #e7ff57;
}

.hub-button[disabled] {
    cursor: wait;
    opacity: .6;
    transform: none;
}

.hub-button-secondary,
.hub-link-button {
    color: #182119;
    background: transparent;
}

.hub-button-danger {
    color: #a13b2c;
    border-color: rgba(161,59,44,.35);
}

.hub-card--dark .hub-button {
    color: #162016;
    border-color: #e7ff57;
    background: #e7ff57;
}

.hub-card--dark .hub-button:hover {
    color: #fff;
    border-color: #fff;
    background: transparent;
}

.hub-auth-switch {
    margin: 1.5rem 0 0;
    color: rgba(28, 38, 31, .62);
    font-size: .8rem;
    text-align: center;
}

.hub-auth-switch a {
    color: #bc4934;
    font-weight: 700;
}

.hub-notice {
	max-height: 8rem;
	margin: 0 0 1.25rem;
	padding: .9rem 1rem;
	overflow: hidden;
	border: 1px solid;
	border-radius: .85rem;
	font-size: .82rem;
	line-height: 1.6;
	transform: translateY(0);
	transition:
		opacity .4s ease,
		transform .4s var(--ease-out),
		max-height .4s ease,
		margin .4s ease,
		padding .4s ease,
		border-width .4s ease;
}

.hub-notice.is-leaving {
	max-height: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-width: 0;
	opacity: 0;
	transform: translateY(-.6rem);
}

.hub-notice--floating {
	position: fixed;
	top: calc(var(--header-height) + 1rem);
	right: clamp(1rem, 3vw, 2.5rem);
	z-index: 1200;
	width: min(30rem, calc(100vw - 2rem));
	margin: 0;
	box-shadow: 0 1rem 3rem rgba(20, 31, 22, .16);
}

.hub-notice--success {
    color: #1d5a3b;
    border-color: rgba(29,90,59,.25);
    background: rgba(87, 185, 126, .12);
}

.hub-notice--error {
    color: #973a2b;
    border-color: rgba(151,58,43,.24);
    background: rgba(219, 85, 61, .1);
}

.hub-notice--info {
    color: #355d82;
    border-color: rgba(53,93,130,.22);
    background: rgba(94, 146, 194, .1);
}

.hub-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Private profile homepage */
.profile-page {
    display: block;
    padding-top: calc(var(--header-height) + 3.5rem);
}

.profile-hero {
    position: relative;
    display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.2rem, 3vw, 2.5rem);
	align-items: center;
	min-height: 18rem;
	padding: clamp(1.35rem, 3.5vw, 2.8rem);
    overflow: hidden;
    border-radius: 2.4rem;
    color: #f7f3e9;
    background:
        radial-gradient(circle at 84% 18%, rgba(224, 244, 98, .16), transparent 17rem),
        linear-gradient(135deg, #111711, #1b2b19 72%, #263819);
    box-shadow: 0 1.8rem 4rem rgba(20, 30, 22, .16);
}

.profile-hero::after {
    content: "个";
    position: absolute;
    right: -1.5rem;
    bottom: -8rem;
    color: rgba(224, 244, 98, .07);
    font-family: var(--font-serif);
    font-size: clamp(18rem, 34vw, 34rem);
    line-height: 1;
    pointer-events: none;
}

.profile-avatar,
.profile-intro {
    position: relative;
    z-index: 1;
}

.profile-avatar {
	width: clamp(6.5rem, 10vw, 8.5rem);
    aspect-ratio: 1;
    overflow: hidden;
    border: .45rem solid rgba(247, 243, 233, .16);
    border-radius: 50%;
    background: #263819;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .25);
}

.profile-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-eyebrow,
.profile-card-index {
    margin: 0 0 1rem;
    color: #e7ff57;
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.profile-title {
    max-width: 100%;
    margin: 0;
    font-family: var(--font-serif);
	font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.profile-summary {
    max-width: 34rem;
	margin: 1rem 0 0;
    color: rgba(247, 243, 233, .66);
    line-height: 1.9;
	overflow-wrap: anywhere;
}

.profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
	margin-top: 1rem;
}

.profile-badges span {
    padding: .4rem .72rem;
    border: 1px solid rgba(247, 243, 233, .2);
    border-radius: 999px;
    color: rgba(247, 243, 233, .8);
    font-size: .7rem;
    letter-spacing: .07em;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 1.3rem 0;
    overflow: hidden;
    border: 1px solid rgba(28, 38, 31, .13);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .48);
}

.profile-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    min-height: 7.5rem;
    padding: 1.5rem;
    border-right: 1px solid rgba(28, 38, 31, .12);
}

.profile-stat:last-child {
    border-right: 0;
}

.profile-stat strong {
    font-family: var(--font-serif);
    font-size: clamp(2.7rem, 5vw, 4.6rem);
    font-weight: 500;
    line-height: 1;
}

.profile-stat span {
    color: rgba(28, 38, 31, .56);
    font-size: .72rem;
    letter-spacing: .08em;
}

.profile-stats--public {
	grid-template-columns: repeat(3, 1fr);
}

.profile-signature-input {
	min-height: 7rem;
}

.profile-card--identity > .profile-settings-link {
	display: block;
	width: fit-content;
	margin-top: .65rem;
}

.public-profile-posts {
	margin-bottom: 2rem;
}

.public-profile-missing {
	display: grid;
	min-height: min(36rem, calc(100vh - var(--header-height) - 6rem));
	align-content: center;
	justify-items: start;
	padding: clamp(2rem, 6vw, 5rem);
	border: 1px solid rgba(28, 38, 31, .13);
	border-radius: 1.5rem;
	background: rgba(255, 255, 255, .58);
}

.public-profile-missing p {
	margin: 0 0 .8rem;
	color: #c64935;
	font-size: .7rem;
	font-weight: 750;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.public-profile-missing h1 {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 2.5rem;
	font-weight: 500;
	letter-spacing: 0;
}

.public-profile-missing span {
	margin-top: 1rem;
	color: rgba(28, 38, 31, .62);
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
    gap: 1.3rem;
    align-items: stretch;
}

.profile-card {
    padding: clamp(1.4rem, 3vw, 2.4rem);
    border: 1px solid rgba(28, 38, 31, .13);
    border-radius: 1.8rem;
    background: rgba(255, 255, 255, .58);
}

.profile-card--identity {
    color: #f7f3e9;
    background: #173c32;
}

.profile-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.profile-section-head p {
    margin: 0 0 .4rem;
    color: #d6533b;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.profile-section-head h2,
.profile-card--identity h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 500;
    letter-spacing: -.045em;
}

.profile-section-head > a,
.profile-settings-link {
    color: inherit;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 700;
}

.profile-post-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-post-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid rgba(28, 38, 31, .13);
}

.profile-post-list li:last-child {
    border-bottom: 1px solid rgba(28, 38, 31, .13);
}

.profile-post-list li > div {
    display: grid;
    gap: .32rem;
}

.profile-post-list time {
    color: rgba(28, 38, 31, .48);
    font-size: .66rem;
    letter-spacing: .08em;
}

.profile-post-list a,
.profile-post-list li > div > span {
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-empty {
    display: grid;
    justify-items: start;
    min-height: 13rem;
    align-content: center;
    gap: .8rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(28, 38, 31, .13);
}

.profile-empty > span {
    color: #d6533b;
    font-family: var(--font-serif);
    font-size: 2.2rem;
}

.profile-empty p {
    max-width: 30rem;
    margin: 0;
    color: rgba(28, 38, 31, .62);
    line-height: 1.8;
}

.profile-empty a {
    color: inherit;
    font-weight: 700;
}

.profile-info-list {
    display: grid;
    margin: 2rem 0;
}

.profile-info-list div {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(247, 243, 233, .14);
}

.profile-info-list div:last-child {
    border-bottom: 1px solid rgba(247, 243, 233, .14);
}

.profile-info-list dt {
    color: rgba(247, 243, 233, .48);
    font-size: .7rem;
    letter-spacing: .08em;
}

.profile-info-list dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: .8rem;
    font-weight: 700;
    text-align: right;
}

.profile-privacy {
    margin: 0 0 1.4rem;
    color: rgba(247, 243, 233, .55);
    font-size: .74rem;
    line-height: 1.8;
}

.profile-settings-link {
    color: #e7ff57;
}

.profile-info-list dd a {
    color: #e7ff57;
}

/* Account */
.account-page {
    display: block;
    padding-top: calc(var(--header-height) + 4rem);
}

.account-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.account-avatar,
.comment-avatar {
    overflow: hidden;
    border-radius: 50%;
    background: #111711;
}

.account-avatar {
    width: clamp(5.5rem, 9vw, 7.5rem);
    aspect-ratio: 1;
    border: .35rem solid rgba(255,255,255,.75);
    box-shadow: 0 1rem 2.5rem rgba(20,30,22,.12);
}

.account-avatar img,
.comment-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-name {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.05em;
}

.member-id-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin-top: .85rem;
}

.member-id {
    display: inline-flex;
    padding: .42rem .7rem;
    border: 1px solid rgba(28,38,31,.2);
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .6rem;
}

.account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
    gap: 1.4rem;
    align-items: start;
}

.account-column {
    display: grid;
    gap: 1.4rem;
}

.hub-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.hub-section-head h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 500;
}

.user-post-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.user-post-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-top: 1px solid rgba(28,38,31,.13);
}

.user-post-item:last-child {
    border-bottom: 1px solid rgba(28,38,31,.13);
}

.user-post-item a {
    text-decoration: none;
    font-weight: 650;
}

.status-pill {
    display: inline-flex;
    padding: .32rem .58rem;
    border-radius: 999px;
    color: #745223;
    background: rgba(227, 181, 82, .17);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.status-pill--publish {
    color: #236143;
    background: rgba(80, 177, 117, .14);
}

.empty-state {
    margin: 0;
    padding: 1.25rem 0;
    color: rgba(28,38,31,.58);
    border-top: 1px solid rgba(28,38,31,.13);
    border-bottom: 1px solid rgba(28,38,31,.13);
    font-size: .84rem;
}

.avatar-field {
    display: grid;
    grid-template-columns: 4rem 1fr;
    align-items: center;
    gap: 1rem;
}

.avatar-preview {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    background: #111711;
}

.file-input {
	max-width: 100%;
	font-size: .75rem;
}

.avatar-upload-status,
.message-send-status {
	min-height: 1.25rem;
	margin: .35rem 0 0;
	color: rgba(28, 38, 31, .62);
	font-size: .7rem;
	line-height: 1.5;
}

.avatar-upload-status.is-success,
.message-send-status.is-success {
	color: #276338;
}

.avatar-upload-status.is-error,
.message-send-status.is-error {
	color: #a22e21;
}

/* Unified profile settings and social hub */
.profile-management,
.social-hub,
.message-hub {
	margin-top: 1.3rem;
	scroll-margin-top: calc(var(--header-height) + 1.2rem);
}

.profile-management,
.social-hub,
.message-hub {
	padding: clamp(1.4rem, 3.4vw, 2.6rem);
	border: 1px solid rgba(28, 38, 31, .13);
	border-radius: 1.8rem;
	background: rgba(255, 255, 255, .48);
}

.profile-management-head,
.social-section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.profile-management-head p,
.social-section-head p {
	margin: 0 0 .35rem;
	color: #d6533b;
	font-size: .68rem;
	font-weight: 750;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.profile-management-head h2,
.social-section-head h2 {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(2.1rem, 4vw, 3.6rem);
	font-weight: 500;
	letter-spacing: -.05em;
}

.profile-management-head > span,
.social-section-head > span {
	padding: .42rem .72rem;
	border: 1px solid rgba(28, 38, 31, .17);
	border-radius: 999px;
	color: rgba(28, 38, 31, .62);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .06em;
}

.profile-settings-grid,
.social-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.3rem;
	align-items: start;
}

.profile-settings-grid .hub-card {
	height: 100%;
	box-shadow: none;
}

.profile-settings-grid .hub-card-title {
	font-size: 1.8rem;
}

.social-hub {
	background: #eef0e4;
}

.social-card {
	min-width: 0;
	padding: clamp(1.2rem, 2.5vw, 2rem);
	border: 1px solid rgba(28, 38, 31, .13);
	border-radius: 1.4rem;
	background: rgba(255, 253, 248, .78);
}

.social-card h3,
.message-placeholder h3 {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.75rem;
	font-weight: 500;
	letter-spacing: -.035em;
}

.social-card > p {
	margin: .55rem 0 1.2rem;
	color: rgba(28, 38, 31, .58);
	font-size: .78rem;
	line-height: 1.7;
}

.social-card-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.social-card-heading > span {
	color: #b74331;
	font-size: .7rem;
	font-weight: 750;
}

.friend-search-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .65rem;
}

.friend-search-form .hub-button {
	align-self: stretch;
	min-width: 5.5rem;
}

.member-result-list {
	display: grid;
	margin-top: 1.15rem;
}

.member-row {
	display: grid;
	grid-template-columns: 2.8rem minmax(0, 1fr) auto;
	gap: .75rem;
	align-items: center;
	min-width: 0;
	padding: .85rem 0;
	border-top: 1px solid rgba(28, 38, 31, .12);
}

.member-row:last-child {
	border-bottom: 1px solid rgba(28, 38, 31, .12);
}

.member-row-avatar,
.message-panel-head > div,
.message-friend > span {
	overflow: hidden;
	border-radius: 50%;
	background: #172019;
}

.member-row-avatar {
	display: block;
	width: 2.8rem;
	height: 2.8rem;
}

.member-row-avatar img,
.message-panel-head img,
.message-friend img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.member-row-copy {
	display: grid;
	min-width: 0;
	gap: .2rem;
}

.member-row-copy strong {
	overflow: hidden;
	font-size: .82rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.member-profile-link,
.request-profile-link {
	color: inherit;
	text-decoration: none;
}

.member-profile-link:hover,
.member-profile-link:focus-visible,
.request-profile-link:hover,
.request-profile-link:focus-visible {
	color: #b84833;
	text-decoration: underline;
	text-underline-offset: .2rem;
}

.member-row-copy span {
	color: rgba(28, 38, 31, .5);
	font-size: .67rem;
	letter-spacing: .05em;
}

.member-row-actions,
.request-row > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .4rem;
}

.social-inline-form {
	display: inline-flex;
	margin: 0;
}

.social-inline-form .hub-honeypot,
.social-inline-form input[type="hidden"] {
	display: none;
}

.social-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-height: 2rem;
	padding: .38rem .68rem;
	border: 1px solid #172019;
	border-radius: 999px;
	cursor: pointer;
	color: #f7f3e9;
	background: #172019;
	text-decoration: none;
	font: inherit;
	font-size: .67rem;
	font-weight: 700;
	transition: transform .2s ease, color .2s ease, background .2s ease;
}

.social-button:hover,
.social-button:focus-visible {
	transform: translateY(-1px);
	color: #172019;
	background: #e7ff57;
}

.social-button--quiet {
	color: rgba(28, 38, 31, .65);
	border-color: rgba(28, 38, 31, .18);
	background: transparent;
}

.social-state {
	display: inline-flex;
	align-items: center;
	color: rgba(28, 38, 31, .5);
	font-size: .67rem;
}

.unread-badge {
	display: inline-grid;
	place-items: center;
	min-width: 1.2rem;
	height: 1.2rem;
	padding: 0 .25rem;
	border-radius: 999px;
	color: #172019;
	background: #e7ff57;
	font-size: .62rem;
}

.social-empty,
.message-empty {
	margin: 0;
	padding: 1.2rem 0;
	color: rgba(28, 38, 31, .52);
	font-size: .78rem;
	line-height: 1.7;
}

.friend-requests {
	display: grid;
	gap: .55rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(28, 38, 31, .13);
}

.friend-requests h4 {
	margin: .4rem 0 0;
	font-size: .72rem;
	letter-spacing: .08em;
}

.request-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	padding: .55rem 0;
	font-size: .74rem;
}

.message-hub {
	background: #172019;
}

.message-hub .social-section-head h2 {
	color: #f7f3e9;
}

.message-hub .social-section-head > span {
	color: rgba(247, 243, 233, .62);
	border-color: rgba(247, 243, 233, .18);
}

.message-layout {
	display: grid;
	grid-template-columns: minmax(14rem, .34fr) minmax(0, 1fr);
	min-height: 34rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .11);
	border-radius: 1.4rem;
	background: rgba(255, 255, 255, .035);
}

.message-friends {
	display: grid;
	align-content: start;
	padding: .8rem;
	border-right: 1px solid rgba(255, 255, 255, .1);
}

.message-friends .social-empty {
	padding: 1rem;
	color: rgba(247, 243, 233, .52);
}

.message-friend {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto;
	gap: .7rem;
	align-items: center;
	padding: .7rem;
	border-radius: .95rem;
	color: rgba(247, 243, 233, .72);
	text-decoration: none;
	transition: color .2s ease, background .2s ease;
}

.message-friend:hover,
.message-friend:focus-visible,
.message-friend.is-active {
	color: #fff;
	background: rgba(255, 255, 255, .08);
}

.message-friend.is-loading {
	cursor: progress;
}

.message-friend > span {
	width: 2.5rem;
	height: 2.5rem;
}

.message-friend strong {
	display: grid;
	min-width: 0;
	gap: .15rem;
	overflow: hidden;
	font-size: .76rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.message-friend small {
	color: rgba(247, 243, 233, .42);
	font-size: .62rem;
	font-weight: 500;
}

.message-friend em {
	display: grid;
	place-items: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 .3rem;
	border-radius: 999px;
	color: #152016;
	background: #e7ff57;
	font-size: .62rem;
	font-style: normal;
	font-weight: 750;
}

.message-panel {
	display: grid;
	grid-template-rows: auto minmax(18rem, 1fr) auto;
	min-width: 0;
	background: #f7f3e9;
}

.message-panel-head {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.2rem;
	border-bottom: 1px solid rgba(28, 38, 31, .12);
}

.message-panel-head > div {
	width: 2.8rem;
	height: 2.8rem;
}

.message-panel-head p {
	display: grid;
	gap: .12rem;
	margin: 0;
}

.message-panel-head strong {
	font-size: .86rem;
}

.message-panel-head span {
	color: rgba(28, 38, 31, .5);
	font-size: .66rem;
}

.message-thread {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	min-height: 0;
	max-height: 28rem;
	padding: 1.2rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.message-bubble {
	align-self: flex-start;
	max-width: min(80%, 34rem);
	padding: .75rem .9rem;
	border-radius: .95rem .95rem .95rem .25rem;
	background: #fff;
	box-shadow: 0 .4rem 1.2rem rgba(20, 30, 22, .06);
}

.message-bubble.is-mine {
	align-self: flex-end;
	border-radius: .95rem .95rem .25rem .95rem;
	background: #e7ff57;
}

.message-bubble p {
	margin: 0;
	font-size: .8rem;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.message-bubble time {
	display: block;
	margin-top: .32rem;
	color: rgba(28, 38, 31, .42);
	font-size: .58rem;
	text-align: right;
}

.message-empty {
	margin: auto;
}

.message-compose {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: .7rem;
	padding: 1rem 1.2rem;
	border-top: 1px solid rgba(28, 38, 31, .12);
}

.message-compose textarea {
	width: 100%;
	min-height: 3.2rem;
	max-height: 9rem;
	padding: .8rem .9rem;
	border: 1px solid rgba(28, 38, 31, .16);
	border-radius: .9rem;
	outline: 0;
	background: rgba(255, 255, 255, .72);
	font: inherit;
	font-size: .8rem;
	resize: vertical;
}

.message-compose textarea:focus {
	border-color: #b84833;
	box-shadow: 0 0 0 .2rem rgba(184, 72, 51, .1);
}

.message-compose .hub-button {
	align-self: end;
}

.message-compose .message-send-status {
	grid-column: 1 / -1;
	margin: -.2rem 0 0;
}

.message-placeholder {
	grid-row: 1 / -1;
	display: grid;
	place-items: center;
	align-content: center;
	gap: .7rem;
	padding: 2rem;
	text-align: center;
}

.message-placeholder > span {
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	border: 1px solid rgba(28, 38, 31, .16);
	border-radius: 50%;
	font-size: 1.3rem;
}

.message-placeholder p {
	max-width: 24rem;
	margin: 0;
	color: rgba(28, 38, 31, .55);
	font-size: .8rem;
	line-height: 1.7;
}

/* Write */
.write-page {
    display: block;
    padding-top: calc(var(--header-height) + 4rem);
}

.write-layout {
    display: grid;
    grid-template-columns: minmax(14rem, .35fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}

.write-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
}

.write-editor-card {
    padding: 0;
    overflow: hidden;
    background: rgba(255, 253, 248, .94);
}

.write-editor-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.65rem clamp(1.25rem, 3vw, 2.4rem);
    border-bottom: 1px solid rgba(28, 38, 31, .12);
}

.write-editor-heading .hub-card-title {
    margin-bottom: 0;
}

.write-editor-kicker {
    margin: 0 0 .35rem;
    color: #d6533b;
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.write-review-state {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
    color: rgba(28, 38, 31, .62);
    font-size: .72rem;
    font-weight: 700;
}

.write-review-state::before {
    content: "";
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: #dfa53a;
	box-shadow: 0 0 0 .28rem rgba(223, 165, 58, .13);
}

.write-review-state--live::before {
	background: #50ad72;
	box-shadow: 0 0 0 .28rem rgba(80, 173, 114, .13);
}

.write-form {
    gap: 0;
}

.write-editor-card > .hub-notice {
    margin: 1.4rem clamp(1.25rem, 3vw, 2.4rem) 0;
}

.write-title-field {
    padding: 1.2rem clamp(1.25rem, 3vw, 2.4rem) .5rem;
}

.write-title-input {
    width: 100%;
    padding: .6rem 0 1rem;
    border: 0;
    border-bottom: 1px solid rgba(28, 38, 31, .13);
    outline: 0;
    color: #172019;
    background: transparent;
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 4.8rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.05em;
    transition: border-color .25s ease;
}

.write-title-input::placeholder {
    color: rgba(28, 38, 31, .28);
}

.write-title-input:focus {
    border-color: #d6533b;
}

.write-editor-frame {
    min-width: 0;
    padding: 1.25rem clamp(1.25rem, 3vw, 2.4rem) 1.7rem;
}

.write-editor-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .7rem;
}

.write-editor-label-row span {
    color: rgba(28, 38, 31, .5);
    font-size: .66rem;
    letter-spacing: .04em;
}

.write-editor-frame .wp-editor-wrap {
    min-width: 0;
    border: 1px solid rgba(28, 38, 31, .17);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
}

.write-editor-frame .wp-editor-tools {
    min-height: 2.5rem;
    padding: .45rem .55rem 0;
    background: #f0ece4;
}

.write-editor-frame .wp-editor-tabs {
    float: right;
}

.write-editor-frame .wp-switch-editor {
    min-height: 2rem;
    margin: 0 0 0 .25rem;
    padding: .35rem .7rem;
    border: 1px solid rgba(28, 38, 31, .14);
    border-bottom: 0;
    border-radius: .5rem .5rem 0 0;
    color: rgba(28, 38, 31, .68);
    background: rgba(255, 255, 255, .52);
    font-size: .68rem;
}

.write-editor-frame .tmce-active .switch-tmce,
.write-editor-frame .html-active .switch-html {
    color: #172019;
    background: #fff;
}

.write-editor-frame .wp-editor-container {
    border: 0;
}

.write-editor-frame .mce-tinymce,
.write-editor-frame .mce-toolbar-grp,
.write-editor-frame .mce-statusbar {
    border: 0;
    box-shadow: none;
}

.write-editor-frame .mce-toolbar-grp {
    max-width: 100%;
    border-bottom: 1px solid rgba(28, 38, 31, .12);
    background: #f8f6f1;
}

.write-editor-frame .mce-toolbar .mce-btn-group {
    max-width: 100%;
    margin: .25rem .2rem;
}

.write-editor-frame .mce-btn,
.write-editor-frame .mce-menubtn {
    border-radius: .35rem;
}

.write-editor-frame .mce-statusbar {
    border-top: 1px solid rgba(28, 38, 31, .1);
    background: #f8f6f1;
}

.write-editor-frame .quicktags-toolbar {
    padding: .55rem;
    border-bottom: 1px solid rgba(28, 38, 31, .12);
    background: #f8f6f1;
}

.write-editor-frame .quicktags-toolbar input.button {
    margin: .15rem;
}

.write-editor-frame .wp-editor-area {
    width: 100%;
    min-height: 28rem;
    padding: 1.25rem;
    border: 0;
    outline: 0;
    color: #1c261f;
    background: #fff;
    font: 1rem/1.8 ui-monospace, SFMono-Regular, Menlo, monospace;
    resize: vertical;
}

.write-publish-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.3rem;
    align-items: end;
    padding: 1.4rem clamp(1.25rem, 3vw, 2.4rem) 1.7rem;
    border-top: 1px solid rgba(28, 38, 31, .12);
    background: rgba(240, 236, 228, .55);
}

.write-tags-field {
    min-width: 0;
}

.write-tag-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    min-height: 3.1rem;
    padding: .45rem .65rem;
    border: 1px solid rgba(28, 38, 31, .18);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .8);
    transition: border-color .25s ease, box-shadow .25s ease;
}

.write-tag-control:focus-within {
    border-color: #ca5038;
    box-shadow: 0 0 0 .22rem rgba(202, 80, 56, .1);
}

.write-tag-list {
    display: contents;
}

.write-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .42rem .35rem .62rem;
    border-radius: 999px;
    color: #173c32;
    background: rgba(23, 60, 50, .1);
    font-size: .72rem;
    font-weight: 700;
}

.write-tag-chip button {
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: inherit;
    background: rgba(23, 60, 50, .1);
    line-height: 1;
}

.write-tag-input {
    flex: 1 1 10rem;
    min-width: 7rem;
    min-height: 2rem;
    padding: .25rem;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .8rem;
}

.write-submit {
    min-width: 11rem;
}

.write-guidelines {
    display: grid;
    gap: 1rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: guideline;
}

.write-guidelines li {
    display: grid;
    grid-template-columns: 1.8rem 1fr;
    gap: .7rem;
    color: rgba(28,38,31,.65);
    font-size: .78rem;
}

.write-guidelines li::before {
    counter-increment: guideline;
    content: counter(guideline, decimal-leading-zero);
    color: #cf523a;
    font-family: ui-monospace, monospace;
}

/* Showcase */
.showcase-hero,
.blog-hero {
	--showcase-ink: #eef3d9;
	--showcase-accent: #b8d278;
	--showcase-muted: rgba(238, 243, 217, .72);
	--showcase-mark: rgba(210, 231, 166, .16);
	--showcase-overlay-start: rgba(3, 24, 19, .88);
	--showcase-overlay-end: rgba(4, 27, 20, .56);
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(21rem, 42vh, 27rem);
	padding: calc(var(--header-height) + 2rem) 0 clamp(2rem, 4vh, 3rem);
	overflow: hidden;
	color: var(--showcase-ink);
	background: #0a2b21;
	isolation: isolate;
}

.showcase-hero-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 52%;
}

.showcase-hero::before,
.blog-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, var(--showcase-overlay-start) 0%, color-mix(in srgb, var(--showcase-overlay-start) 74%, transparent) 48%, var(--showcase-overlay-end) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 45%, rgba(0, 0, 0, .3));
}

.showcase-hero::after,
.blog-hero::after {
    content: attr(data-mark);
    position: absolute;
    right: 4vw;
    bottom: -18%;
	color: var(--showcase-mark);
    font-family: var(--font-serif);
	font-size: min(34vw, 22rem);
    line-height: 1;
}

.showcase-hero .showcase-shell,
.blog-hero .blog-shell {
    position: relative;
    z-index: 2;
}

.showcase-hero .showcase-eyebrow,
.blog-hero .blog-eyebrow {
	margin-bottom: 1rem;
	color: var(--showcase-accent);
}

.showcase-hero .showcase-title,
.blog-hero .blog-title {
	font-size: clamp(3.1rem, 6vw, 6rem);
	line-height: .94;
}

.showcase-summary,
.blog-summary {
    max-width: 38rem;
	margin: 1.25rem 0 0;
	color: var(--showcase-muted);
	font-size: clamp(.88rem, 1.05vw, 1rem);
	line-height: 1.75;
}

.resume-page .showcase-hero {
	--showcase-ink: #eef3d9;
	--showcase-accent: #b8d278;
	--showcase-muted: rgba(238, 243, 217, .7);
	--showcase-mark: rgba(210, 231, 166, .16);
	--showcase-overlay-start: rgba(3, 24, 19, .9);
	--showcase-overlay-end: rgba(4, 27, 20, .58);
	background: #0a2b21;
}

.projects-page .showcase-hero {
	--showcase-ink: #fff0d5;
	--showcase-accent: #ff6a32;
	--showcase-muted: rgba(255, 240, 213, .7);
	--showcase-mark: rgba(255, 90, 31, .2);
	--showcase-overlay-start: rgba(20, 3, 1, .92);
	--showcase-overlay-end: rgba(41, 7, 2, .48);
	background: #170503;
}

.projects-page .showcase-hero-image {
	object-position: center 51%;
	transform: scaleX(-1);
}

.blog-page .blog-hero {
	--showcase-ink: #fff8ea;
	--showcase-accent: #ed9d67;
	--showcase-muted: rgba(255, 248, 234, .72);
	--showcase-mark: rgba(249, 239, 219, .16);
	--showcase-overlay-start: rgba(5, 20, 23, .9);
	--showcase-overlay-end: rgba(8, 28, 30, .5);
	background: #17282a;
}

.resume-body {
    padding: clamp(4rem, 9vw, 8rem) 0;
}

.resume-layout {
    display: grid;
    grid-template-columns: minmax(14rem, .33fr) minmax(0, .67fr);
    gap: clamp(3rem, 9vw, 9rem);
}

.resume-aside {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
    align-self: start;
}

.resume-aside-number {
    display: block;
    margin-bottom: 1rem;
    color: #d6533b;
    font-family: var(--font-serif);
    font-size: 5rem;
    line-height: 1;
}

.resume-aside p {
    color: rgba(28,38,31,.6);
    font-size: .8rem;
    line-height: 1.8;
}

.resume-editor-content {
    font-size: 1.02rem;
    line-height: 1.9;
}

.resume-editor-content h2 {
    margin: 3.2rem 0 1rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(28,38,31,.16);
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -.04em;
}

.resume-editor-content h2:first-child {
    margin-top: 0;
}

.resume-editor-content p,
.resume-editor-content ul {
    color: rgba(28,38,31,.72);
}

.resume-editor-content ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    padding: 0;
    list-style: none;
}

.resume-editor-content li {
    padding: .9rem 1rem;
    border: 1px solid rgba(28,38,31,.14);
    border-radius: .75rem;
    background: rgba(255,255,255,.38);
}

.projects-body {
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
}

.project-card {
    --project-bg: #e9dfd2;
    --project-ink: #1b2820;
    --project-accent: #db5a3e;
    position: relative;
    display: grid;
    align-content: space-between;
    min-height: 28rem;
    padding: clamp(1.5rem, 3.5vw, 2.8rem);
    overflow: hidden;
    color: var(--project-ink);
    border-radius: 1.4rem;
    background: var(--project-bg);
    text-decoration: none;
    isolation: isolate;
}

.project-card-copy {
    display: grid;
    align-content: space-between;
    min-width: 0;
}

.project-card--featured {
    --project-bg: #dce6df;
    --project-ink: #18241d;
    --project-accent: #b64a35;
    grid-column: 1 / -1;
    grid-template-columns: minmax(18rem, .8fr) minmax(28rem, 1.2fr);
    gap: clamp(2rem, 4vw, 4rem);
    min-height: 32rem;
    border-radius: .5rem;
}

.project-card--featured .project-title {
    max-width: 18ch;
    font-family: var(--font-sans);
    font-size: 2.8rem;
    font-weight: 760;
    line-height: 1.16;
    letter-spacing: 0;
    text-wrap: balance;
}

.project-card-media {
    position: relative;
    display: block;
    min-height: 24rem;
    overflow: hidden;
    border: 1px solid rgba(24, 36, 29, .18);
    border-radius: .5rem;
    background: #f4f5f2;
    box-shadow: 0 1.2rem 2.6rem rgba(24, 36, 29, .16);
}

.project-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
    transition: transform .7s var(--ease-out);
}

.project-card--featured:hover .project-card-media img,
.project-card--featured:focus-visible .project-card-media img {
    transform: scale(1.018);
}

.project-card[data-scroll-stop] {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.js .project-card[data-scroll-piece] {
    opacity: .52;
    transform: translateY(2.4rem) scale(.975);
    transition: opacity .65s ease, transform .9s var(--ease-out), box-shadow .45s ease;
}

.js .project-card[data-scroll-piece].is-in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.js .project-card[data-scroll-piece]:hover,
.js .project-card[data-scroll-piece]:focus-visible {
    box-shadow: 0 1.5rem 3rem rgba(20, 30, 22, .13);
}

.project-card:nth-child(2) { --project-bg: #18372e; --project-ink: #eff5e8; --project-accent: #e4f75e; }
.project-card:nth-child(3) { --project-bg: #f1cc50; --project-ink: #241f17; --project-accent: #fff8dd; }
.project-card:nth-child(4) { --project-bg: #dfe7f3; --project-ink: #173158; --project-accent: #df5a40; }
.project-card:nth-child(5) { --project-bg: #25223d; --project-ink: #fbf1f6; --project-accent: #eea4ca; }
.project-card:nth-child(6) { --project-bg: #b9d8f5; --project-ink: #142b42; --project-accent: #fff16b; }

.project-card::after {
    content: attr(data-index);
    position: absolute;
    right: -.02em;
    bottom: -.22em;
    z-index: -1;
    color: color-mix(in srgb, var(--project-accent) 24%, transparent);
    font-family: var(--font-serif);
    font-size: 17rem;
    line-height: 1;
}

.project-card:hover .project-arrow,
.project-card:focus-visible .project-arrow {
    transform: translate(.2rem, -.2rem);
}

.project-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
}

.project-title {
    max-width: 8ch;
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 5vw, 5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.06em;
}

.project-excerpt {
    max-width: 30rem;
    margin: 1.2rem 0 0;
    color: color-mix(in srgb, var(--project-ink) 70%, transparent);
    font-size: .9rem;
    line-height: 1.8;
}

.project-arrow {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 1.5rem;
    transition: transform .35s var(--ease-out);
}

/* Blog index */
.blog-body {
	padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(5rem, 9vw, 8rem);
}

.blog-body > .blog-shell {
	width: calc(100% - clamp(2rem, 4vw, 4.5rem));
	max-width: none;
}

.blog-dashboard {
	display: grid;
	grid-template-columns: clamp(14.5rem, 18vw, 20rem) minmax(0, 1fr) clamp(17rem, 20vw, 22rem);
	gap: clamp(1.5rem, 2.4vw, 3rem);
	align-items: start;
}

.blog-calendar-column,
.blog-main-column {
	min-width: 0;
}

.blog-calendar-column {
	position: sticky;
	top: calc(var(--header-height) + 1.5rem);
}

.blog-search {
	display: grid;
	gap: .7rem;
	margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}

.blog-search-label {
	font-size: .72rem;
	font-weight: 750;
	letter-spacing: .14em;
}

.blog-search-control {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	min-height: 3.4rem;
	border: 1px solid rgba(28, 38, 31, .2);
	border-radius: 6px;
	background: rgba(255, 255, 255, .52);
	box-shadow: 0 .7rem 2rem rgba(18, 31, 24, .05);
}

.blog-search-control:focus-within {
	border-color: #2c5a50;
	box-shadow: 0 0 0 .2rem rgba(44, 90, 80, .1);
}

.blog-search-control input {
	min-width: 0;
	height: 3.3rem;
	padding: 0 1rem;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: .92rem;
}

.blog-search-control button {
	height: 2.65rem;
	margin-right: .35rem;
	padding: 0 1.15rem;
	border: 0;
	border-radius: 5px;
	cursor: pointer;
	color: #fff8ea;
	background: #234247;
	font-size: .76rem;
	font-weight: 750;
	transition: background-color .25s ease, transform .25s ease;
}

.blog-search-control button:hover,
.blog-search-control button:focus-visible {
	background: #b65339;
	transform: translateY(-1px);
}

.blog-search-clear {
	display: grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	color: rgba(28, 38, 31, .55);
	text-decoration: none;
	font-size: 1.35rem;
}

.blog-activity {
	padding-top: 1.15rem;
	border-top: 3px solid #24464a;
	transition: opacity .2s ease;
}

.blog-activity.is-loading {
	opacity: .5;
	pointer-events: none;
}

.blog-feed-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.8rem;
}

.blog-section-heading {
	margin-bottom: 1rem;
}

.blog-section-heading p,
.blog-feed-heading p,
.blog-rank-group > p {
	margin: 0 0 .42rem;
	color: #b65339;
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .16em;
}

.blog-feed-heading h2,
.blog-rank-group h2 {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(1.8rem, 3.1vw, 2.8rem);
	font-weight: 500;
	line-height: 1.12;
}

.blog-section-heading h2 {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.12;
}

.blog-feed-heading > span {
	flex: 0 0 auto;
	color: rgba(28, 38, 31, .52);
	font-size: .7rem;
}

.blog-calendar-nav {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) 2rem;
	align-items: center;
	gap: .35rem;
	min-height: 3.15rem;
	padding: .5rem 0;
	border-top: 1px solid rgba(28, 38, 31, .14);
	border-bottom: 1px solid rgba(28, 38, 31, .14);
}

.blog-calendar-nav > time {
	min-width: 0;
	text-align: center;
	font-family: var(--font-serif);
	font-size: 1.04rem;
	font-weight: 600;
}

.blog-calendar-arrow {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid rgba(28, 38, 31, .17);
	border-radius: 50%;
	color: #24464a;
	text-decoration: none;
	font-size: 1.45rem;
	line-height: 1;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

a.blog-calendar-arrow:hover,
a.blog-calendar-arrow:focus-visible {
	border-color: #b65339;
	color: #fff8ea;
	background: #b65339;
}

.blog-calendar-arrow[aria-disabled="true"] {
	opacity: .28;
}

.blog-calendar-summary {
	margin: .8rem 0 1.1rem;
	color: rgba(28, 38, 31, .55);
	font-size: .66rem;
	line-height: 1.5;
}

.blog-activity-chart {
	display: grid;
	gap: .38rem;
}

.blog-activity-weekdays {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: .25rem;
	color: rgba(28, 38, 31, .45);
	font-size: .56rem;
	text-align: center;
}

.blog-activity-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: .25rem;
	width: 100%;
}

.blog-activity-day {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	min-width: 0;
	padding: .26rem;
	border: 1px solid rgba(28, 38, 31, .08);
	border-radius: 3px;
	background: rgba(28, 38, 31, .07);
	color: rgba(28, 38, 31, .68);
	font-size: .62rem;
	line-height: 1;
}

.blog-activity-day time {
	display: block;
}

.blog-activity-day small {
	position: absolute;
	right: .2rem;
	bottom: .16rem;
	font-size: .48rem;
	font-weight: 850;
}

.blog-activity-legend i {
	display: block;
	width: .68rem;
	height: .68rem;
	border: 1px solid rgba(28, 38, 31, .06);
	border-radius: 2px;
	background: rgba(28, 38, 31, .08);
}

.blog-activity-day.level-1,
.blog-activity-legend .level-1 { background: #b7c9a4; }
.blog-activity-day.level-2,
.blog-activity-legend .level-2 { background: #6f9f8e; }
.blog-activity-day.level-3,
.blog-activity-legend .level-3 { background: #d68a5b; }
.blog-activity-day.level-4,
.blog-activity-legend .level-4 { background: #b65339; }

.blog-activity-day.level-3,
.blog-activity-day.level-4 {
	color: #fff8ea;
}

.blog-activity-day.is-outside {
	opacity: .3;
}

.blog-activity-day.is-future {
	border-style: dashed;
	background: transparent;
	opacity: .42;
}

.blog-activity-day.is-today {
	outline: 2px solid #24464a;
	outline-offset: 1px;
}

.blog-activity-legend {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .3rem;
	margin-top: .75rem;
	color: rgba(28, 38, 31, .48);
	font-size: .6rem;
}

.blog-feed {
	padding-top: 0;
}

.blog-list {
	display: grid;
}

.blog-card {
	display: grid;
	grid-template-columns: 3.2rem minmax(0, 1fr) 2rem;
	gap: clamp(1rem, 2vw, 1.8rem);
	align-items: start;
	padding: clamp(1.5rem, 3vw, 2.25rem) 0;
	border-top: 1px solid rgba(28, 38, 31, .16);
}

.blog-card:last-child {
    border-bottom: 1px solid rgba(28,38,31,.16);
}

.blog-index-number {
	padding-top: .45rem;
	color: #b65339;
	font-family: ui-monospace, monospace;
	font-size: .7rem;
	letter-spacing: .12em;
}

.blog-card-title {
    margin: 0;
    font-family: var(--font-serif);
	font-size: clamp(1.75rem, 3.2vw, 2.8rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.04em;
}

.blog-card-title a {
	text-decoration: none;
	transition: color .25s ease;
}

.blog-card-title a:hover,
.blog-card-title a:focus-visible {
	color: #b65339;
}

.blog-card-summary {
    margin: .65rem 0 0;
    color: rgba(28,38,31,.6);
	font-size: .82rem;
	line-height: 1.75;
}

.blog-card-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem 1rem;
	margin-top: 1rem;
	color: rgba(28, 38, 31, .52);
	font-size: .68rem;
}

.blog-author {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: rgba(28, 38, 31, .7);
	font-size: .68rem;
}

.blog-author img {
	width: 1.55rem;
	height: 1.55rem;
    border-radius: 50%;
    object-fit: cover;
}

.blog-card-arrow {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	margin-top: .15rem;
	border: 1px solid rgba(28, 38, 31, .2);
	border-radius: 50%;
	text-decoration: none;
	font-size: 1rem;
	transition: color .25s ease, border-color .25s ease, transform .3s var(--ease-out);
}

.blog-card-arrow:hover,
.blog-card-arrow:focus-visible {
	color: #b65339;
	border-color: #b65339;
	transform: translate(.12rem, -.12rem);
}

.blog-empty {
	margin: 0;
	padding: 2rem 0;
	border-top: 1px solid rgba(28, 38, 31, .16);
	border-bottom: 1px solid rgba(28, 38, 31, .16);
	color: rgba(28, 38, 31, .62);
}

.blog-sidebar {
	position: sticky;
	top: calc(var(--header-height) + 1.5rem);
	display: grid;
	gap: 2.8rem;
}

.blog-back-to-top {
	position: fixed;
	right: clamp(1rem, 2vw, 2.25rem);
	bottom: clamp(1rem, 2.5vw, 2rem);
	z-index: 40;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgba(255, 248, 234, .4);
	border-radius: 50%;
	cursor: pointer;
	color: #fff8ea;
	background: #24464a;
	box-shadow: 0 .65rem 1.8rem rgba(12, 29, 27, .2);
	font-size: 1.25rem;
	line-height: 1;
	transition: color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.blog-back-to-top:hover,
.blog-back-to-top:focus-visible {
	color: #fff;
	background: #b65339;
	box-shadow: 0 .8rem 2.1rem rgba(92, 40, 29, .25);
	transform: translateY(-2px);
}

.blog-back-to-top:focus-visible {
	outline: 2px solid #fff8ea;
	outline-offset: 3px;
}

.blog-back-to-top[hidden] {
	display: none;
}

.blog-rank-group {
	padding-top: 1.2rem;
	border-top: 3px solid #24464a;
}

.blog-rank-group--likes {
	border-color: #b65339;
}

.blog-rank-group--latest {
	border-color: #779265;
}

.blog-rank-group h2 {
	font-size: 1.75rem;
}

.blog-rank-group ol {
	display: grid;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.blog-rank-group li {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	gap: .65rem;
	align-items: baseline;
	padding: .9rem 0;
	border-top: 1px solid rgba(28, 38, 31, .13);
}

.blog-rank-group li > span {
	color: #b65339;
	font-family: ui-monospace, monospace;
	font-size: .62rem;
}

.blog-rank-group li a {
	min-width: 0;
	text-decoration: none;
	font-family: var(--font-serif);
	font-size: .94rem;
	line-height: 1.4;
}

.blog-rank-group li a:hover,
.blog-rank-group li a:focus-visible {
	color: #b65339;
}

.blog-rank-group li small {
	color: rgba(28, 38, 31, .48);
	font-size: .6rem;
	white-space: nowrap;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    gap: .55rem;
    margin-top: 3rem;
}

.blog-pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .6rem;
    border: 1px solid rgba(28,38,31,.18);
    border-radius: 999px;
    text-decoration: none;
    font-size: .75rem;
}

.blog-pagination .current {
    color: #fff;
    border-color: #182119;
    background: #182119;
}

/* Author and comments */
.reading-author {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}

a.blog-author,
a.reading-author {
	color: inherit;
	text-decoration: none;
}

a.blog-author:hover,
a.blog-author:focus-visible,
a.reading-author:hover,
a.reading-author:focus-visible,
a.comment-author-name:hover,
a.comment-author-name:focus-visible {
	text-decoration: underline;
	text-underline-offset: .2rem;
}

a.comment-author-name {
	color: inherit;
	text-decoration: none;
}

.reading-author img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
}

.reading-author-copy {
    display: grid;
    gap: .1rem;
}

.reading-author-id {
    color: rgba(255,255,255,.46);
    font-family: ui-monospace, monospace;
    font-size: .62rem;
}

.reading-intro .reading-author-id {
	color: rgba(31, 50, 44, .5);
}

.reading-intro .reading-author strong {
	color: #20332e;
	font-size: .78rem;
}

.comments-area {
    width: min(calc(100% - 2 * var(--page-gutter)), 48rem);
    margin: 0 auto;
    padding: 0 0 clamp(4rem, 9vw, 8rem);
}

.comments-heading,
.comment-reply-title {
    margin: 0 0 1.8rem;
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.04em;
}

.comment-list,
.comment-list .children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comment-list .children {
    margin-left: 3rem;
}

.comment-card {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(28,38,31,.14);
}

.comment-avatar {
    width: 3rem;
    height: 3rem;
}

.comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.comment-author-name {
    font-weight: 700;
}

.comment-time {
    color: rgba(28,38,31,.48);
    font-size: .68rem;
}

.comment-text {
    color: rgba(28,38,31,.76);
    font-family: var(--font-serif);
    line-height: 1.85;
}

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

.comment-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .8rem;
}

.comment-like,
.comment-reply-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .55rem;
    border: 1px solid rgba(28,38,31,.18);
    border-radius: 999px;
    cursor: pointer;
    color: rgba(28,38,31,.66);
    background: transparent;
    text-decoration: none;
    font-size: .68rem;
}

.comment-like.is-liked {
    color: #b9402e;
    border-color: rgba(185,64,46,.3);
    background: rgba(215,83,61,.09);
}

.comment-like-icon {
    font-size: .85rem;
}

.comment-awaiting {
    color: #876023;
    font-size: .75rem;
}

.comment-respond {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(28,38,31,.14);
}

.comment-form-comment {
    display: grid;
    gap: .55rem;
}

.comment-form-comment label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.comment-form textarea {
    width: 100%;
    min-height: 10rem;
    padding: 1rem;
    border: 1px solid rgba(28,38,31,.18);
    border-radius: 1rem;
    outline: 0;
    background: rgba(255,255,255,.52);
    resize: vertical;
}

.comment-form textarea:focus {
    border-color: #ca5038;
    box-shadow: 0 0 0 .22rem rgba(202,80,56,.1);
}

.comment-form .submit {
    min-height: 3rem;
    padding: .75rem 1.25rem;
    border: 1px solid #182119;
    border-radius: 999px;
    cursor: pointer;
    color: #fff;
    background: #182119;
    font-size: .78rem;
    font-weight: 700;
}

.comments-login-prompt {
    padding: 1.2rem;
    border: 1px solid rgba(28,38,31,.15);
    border-radius: 1rem;
    background: rgba(255,255,255,.4);
    text-align: center;
}

.comments-login-prompt a {
    font-weight: 700;
}

/* Project single */
.project-single-meta {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.project-single-meta span {
    padding: .4rem .7rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    font-size: .72rem;
}

@media (max-width: 1000px) {
	.blog-dashboard {
		grid-template-columns: minmax(13.75rem, 15rem) minmax(0, 1fr);
	}

	.blog-sidebar {
		position: static;
		grid-column: 1 / -1;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}

    .project-card--featured {
        grid-template-columns: minmax(15rem, .8fr) minmax(22rem, 1.2fr);
    }

    .project-card--featured .project-title {
        font-size: 2.25rem;
    }
}

@media (max-width: 1000px) {
	.auth-layout,
	.account-grid,
	.profile-settings-grid,
	.social-grid,
	.write-layout,
	.resume-layout,
	.profile-grid {
		grid-template-columns: 1fr;
	}

    .profile-hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

	.write-sidebar,
	.resume-aside {
		position: static;
	}

	.blog-sidebar {
		position: static;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}

    .blog-card {
        grid-template-columns: 3rem 1fr auto;
    }

    .blog-author {
        display: none;
    }
}

@media (max-width: 700px) {
    .hub-page {
        display: block;
        padding-top: calc(var(--header-height) + 2.5rem);
    }

    .auth-layout {
        gap: 2.5rem;
    }

    .profile-page {
        padding-top: calc(var(--header-height) + 2.5rem);
    }

    .profile-hero {
        grid-template-columns: 1fr;
        gap: 1.4rem;
        min-height: 0;
        padding: 1.4rem;
        border-radius: 1.6rem;
    }

    .profile-avatar {
        width: 6rem;
        border-width: .3rem;
    }

	.profile-title {
		font-size: 1.75rem;
	}

    .profile-summary {
        margin-top: 1rem;
        font-size: .88rem;
    }

	.profile-stats {
		grid-template-columns: repeat(2, 1fr);
		border-radius: 1.2rem;
	}

	.profile-stats--public {
		grid-template-columns: repeat(3, 1fr);
	}

	.profile-stats--public .profile-stat {
		min-width: 0;
		border-right: 1px solid rgba(28, 38, 31, .12);
		border-bottom: 0;
	}

	.profile-stats--public .profile-stat:last-child {
		border-right: 0;
	}

    .profile-stat {
        min-height: 6.4rem;
        padding: 1.1rem;
    }

    .profile-stat:nth-child(2) {
        border-right: 0;
    }

	.profile-stat:nth-child(-n+2) {
		border-bottom: 1px solid rgba(28, 38, 31, .12);
	}

	.profile-stats--public .profile-stat:nth-child(-n+2) {
		border-bottom: 0;
	}

	.profile-stats--public .profile-stat:nth-child(2) {
		border-right: 1px solid rgba(28, 38, 31, .12);
	}

	.profile-card {
		padding: 1.25rem;
		border-radius: 1.3rem;
	}

	.profile-management,
	.social-hub,
	.message-hub {
		padding: 1.15rem;
		border-radius: 1.3rem;
	}

	.profile-management-head,
	.social-section-head {
		align-items: start;
	}

	.member-row {
		grid-template-columns: 2.6rem minmax(0, 1fr);
	}

	.member-row-avatar {
		width: 2.6rem;
		height: 2.6rem;
	}

	.member-row-actions {
		grid-column: 2;
		justify-content: flex-start;
	}

	.message-layout {
		grid-template-columns: 1fr;
		min-height: 36rem;
	}

	.message-friends {
		display: flex;
		gap: .35rem;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}

	.message-friend {
		flex: 0 0 12rem;
	}

	.message-panel {
		min-height: 29rem;
	}

	.message-thread {
		max-height: 24rem;
	}

	.message-compose {
		grid-template-columns: 1fr;
	}

	.message-compose .hub-button {
		width: 100%;
	}

	.request-row {
		align-items: flex-start;
		flex-direction: column;
	}

	.request-row > div {
		justify-content: flex-start;
	}

    .profile-section-head {
        align-items: start;
    }

    .hub-title,
    .showcase-title,
    .blog-title {
        font-size: clamp(3.2rem, 17vw, 5.2rem);
    }

    .auth-points {
        grid-template-columns: 1fr;
    }

    .hub-field-row,
    .projects-grid,
    .resume-editor-content ul {
        grid-template-columns: 1fr;
    }

    .account-header {
        grid-template-columns: auto 1fr;
    }

    .account-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .account-actions .hub-link-button {
        flex: 1;
    }

    .hub-card {
        padding: 1.25rem;
        border-radius: 1.2rem;
    }

    .write-editor-card {
        padding: 0;
    }

    .write-editor-heading,
    .write-editor-label-row,
    .write-publish-panel {
        align-items: stretch;
    }

    .write-editor-label-row,
    .write-publish-panel {
        grid-template-columns: 1fr;
    }

    .write-editor-label-row {
        display: grid;
    }

    .write-publish-panel {
        display: grid;
    }

    .write-title-input {
        font-size: clamp(2rem, 11vw, 3.2rem);
    }

    .write-editor-frame .mce-toolbar-grp {
        overflow-x: auto;
    }

    .write-submit {
        width: 100%;
    }

	.showcase-hero,
	.blog-hero {
		min-height: clamp(19rem, 40svh, 23rem);
		padding-top: calc(var(--header-height) + 1.5rem);
		padding-bottom: 1.8rem;
	}

	.blog-dashboard {
		grid-template-columns: 1fr;
	}

	.blog-calendar-column {
		position: static;
		width: min(100%, 26rem);
	}

	.blog-sidebar {
		grid-column: auto;
		grid-template-columns: 1fr;
		gap: 2.2rem;
	}

	.blog-back-to-top {
		right: 1rem;
		bottom: 1rem;
		width: 2.75rem;
		height: 2.75rem;
	}

	.blog-feed-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: .65rem;
	}

	.blog-search-control button {
		padding: 0 .9rem;
	}

    .project-card {
        min-height: 23rem;
    }

    .project-card--featured {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.25rem;
    }

    .project-card--featured .project-card-copy {
        gap: 3rem;
    }

    .project-card--featured .project-title {
        max-width: 100%;
        font-size: 1.85rem;
    }

    .project-card-media {
        min-height: 13rem;
    }

	.blog-card {
		grid-template-columns: 2rem minmax(0, 1fr) 2rem;
		gap: .8rem;
	}

    .blog-card-summary {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .comment-list .children {
        margin-left: 1rem;
    }

    .comment-card {
        grid-template-columns: 2.5rem 1fr;
        gap: .75rem;
    }

    .comment-avatar {
        width: 2.5rem;
        height: 2.5rem;
    }

    .comment-head {
        display: grid;
        gap: .15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-tab-indicator,
    .auth-tabs a,
    .hub-button,
    .hub-button-secondary,
	.hub-link-button,
	.project-arrow,
	.blog-activity,
	.blog-back-to-top {
		transition: none;
	}

    html[data-auth-transition]::view-transition-group(auth-intro),
    html[data-auth-transition]::view-transition-group(auth-card),
    html[data-auth-transition]::view-transition-group(auth-tab-indicator),
    html[data-auth-transition]::view-transition-group(auth-tab-login),
    html[data-auth-transition]::view-transition-group(auth-tab-register),
    html[data-auth-transition]::view-transition-old(auth-intro),
    html[data-auth-transition]::view-transition-new(auth-intro),
    html[data-auth-transition]::view-transition-old(auth-card),
    html[data-auth-transition]::view-transition-new(auth-card),
    html[data-auth-transition]::view-transition-old(auth-tab-login),
    html[data-auth-transition]::view-transition-new(auth-tab-login),
    html[data-auth-transition]::view-transition-old(auth-tab-register),
    html[data-auth-transition]::view-transition-new(auth-tab-register) {
        animation-duration: .01ms;
        animation-delay: 0ms;
    }
}