/*
 * furk.space — the post-it wall + the front-page hero.
 *
 * Every colour / icon / grain value is a CSS custom property under :root so a
 * later "Wall style" settings page can override them from <head>. The furkspace
 * palette tokens are the theme's; the --fs-* tokens are wall-only.
 */

:root {
	/* note body tints (light) */
	--fs-note-work:     #f4d58d;
	--fs-note-lab:      #a9dcd6;
	--fs-note-table:    #cdbdf0;
	--fs-note-thoughts: #a9d3b4;
	--fs-note-stories:  #efb4a3;
	/* chip / icon accents (light) */
	--fs-chip-work:     #9a6b1f;
	--fs-chip-lab:      #256d64;
	--fs-chip-table:    #5a3fa0;
	--fs-chip-thoughts: #2f6f4f;
	--fs-chip-stories:  #9a4a2f;

	--fs-note-ink:  #2b2721;
	--fs-note-sub:  #6b6152;
	--fs-tape:      rgba(250, 247, 240, 0.5);
	--fs-note-radius: 4px;
	--fs-scatter: 1;   /* note offset multiplier — 0 on desktop (strict grid) */
	--fs-tilt: 1;      /* seeded rotation multiplier — kept at 1 on desktop */

	--fs-grain-opacity: 0.04;
	--fs-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	--fs-icon-work: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M152%2C224a8%2C8%2C0%2C0%2C1-8%2C8H112a8%2C8%2C0%2C0%2C1%2C0-16h32A8%2C8%2C0%2C0%2C1%2C152%2C224Zm71.62-68.17-12.36%2C55.63a16%2C16%2C0%2C0%2C1-25.51%2C9.11L158.51%2C200h-61L70.25%2C220.57a16%2C16%2C0%2C0%2C1-25.51-9.11L32.38%2C155.83a16.09%2C16.09%2C0%2C0%2C1%2C3.32-13.71l28.56-34.26a123.07%2C123.07%2C0%2C0%2C1%2C8.57-36.67c12.9-32.34%2C36-52.63%2C45.37-59.85a16%2C16%2C0%2C0%2C1%2C19.6%2C0c9.34%2C7.22%2C32.47%2C27.51%2C45.37%2C59.85a123.07%2C123.07%2C0%2C0%2C1%2C8.57%2C36.67l28.56%2C34.26A16.09%2C16.09%2C0%2C0%2C1%2C223.62%2C155.83Zm-139.23%2C34Q68.28%2C160.5%2C64.83%2C132.16L48%2C152.36%2C60.36%2C208l.18-.13ZM140%2C100a12%2C12%2C0%2C1%2C0-12%2C12A12%2C12%2C0%2C0%2C0%2C140%2C100Zm68%2C52.36-16.83-20.2q-3.42%2C28.28-19.56%2C57.69l23.85%2C18%2C.18.13Z%22%2F%3E%3C%2Fsvg%3E");
	--fs-icon-lab: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M221.69%2C199.77%2C160%2C96.92V40h8a8%2C8%2C0%2C0%2C0%2C0-16H88a8%2C8%2C0%2C0%2C0%2C0%2C16h8V96.92L34.31%2C199.77A16%2C16%2C0%2C0%2C0%2C48%2C224H208a16%2C16%2C0%2C0%2C0%2C13.72-24.23Zm-90.08-42.91c-15.91-8.05-31.05-12.32-45.22-12.81l24.47-40.8A7.93%2C7.93%2C0%2C0%2C0%2C112%2C99.14V40h32V99.14a7.93%2C7.93%2C0%2C0%2C0%2C1.14%2C4.11L183.36%2C167C171.4%2C169.34%2C154.29%2C168.34%2C131.61%2C156.86Z%22%2F%3E%3C%2Fsvg%3E");
	--fs-icon-table: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M192%2C32H64A32%2C32%2C0%2C0%2C0%2C32%2C64V192a32%2C32%2C0%2C0%2C0%2C32%2C32H192a32%2C32%2C0%2C0%2C0%2C32-32V64A32%2C32%2C0%2C0%2C0%2C192%2C32ZM92%2C176a12%2C12%2C0%2C1%2C1%2C12-12A12%2C12%2C0%2C0%2C1%2C92%2C176Zm0-72a12%2C12%2C0%2C1%2C1%2C12-12A12%2C12%2C0%2C0%2C1%2C92%2C104Zm36%2C36a12%2C12%2C0%2C1%2C1%2C12-12A12%2C12%2C0%2C0%2C1%2C128%2C140Zm36%2C36a12%2C12%2C0%2C1%2C1%2C12-12A12%2C12%2C0%2C0%2C1%2C164%2C176Zm0-72a12%2C12%2C0%2C1%2C1%2C12-12A12%2C12%2C0%2C0%2C1%2C164%2C104Z%22%2F%3E%3C%2Fsvg%3E");
	--fs-icon-thoughts: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M176%2C232a8%2C8%2C0%2C0%2C1-8%2C8H88a8%2C8%2C0%2C0%2C1%2C0-16h80A8%2C8%2C0%2C0%2C1%2C176%2C232Zm40-128a87.55%2C87.55%2C0%2C0%2C1-33.64%2C69.21A16.24%2C16.24%2C0%2C0%2C0%2C176%2C186v6a16%2C16%2C0%2C0%2C1-16%2C16H96a16%2C16%2C0%2C0%2C1-16-16v-6a16%2C16%2C0%2C0%2C0-6.23-12.66A87.59%2C87.59%2C0%2C0%2C1%2C40%2C104.49C39.74%2C56.83%2C78.26%2C17.14%2C125.88%2C16A88%2C88%2C0%2C0%2C1%2C216%2C104Zm-32.11-9.34a57.6%2C57.6%2C0%2C0%2C0-46.56-46.55%2C8%2C8%2C0%2C0%2C0-2.66%2C15.78c16.57%2C2.79%2C30.63%2C16.85%2C33.44%2C33.45A8%2C8%2C0%2C0%2C0%2C176%2C104a9%2C9%2C0%2C0%2C0%2C1.35-.11A8%2C8%2C0%2C0%2C0%2C183.89%2C94.66Z%22%2F%3E%3C%2Fsvg%3E");
	--fs-icon-stories: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M240%2C56V200a8%2C8%2C0%2C0%2C1-8%2C8H160a24%2C24%2C0%2C0%2C0-24%2C23.94%2C7.9%2C7.9%2C0%2C0%2C1-5.12%2C7.55A8%2C8%2C0%2C0%2C1%2C120%2C232a24%2C24%2C0%2C0%2C0-24-24H24a8%2C8%2C0%2C0%2C1-8-8V56a8%2C8%2C0%2C0%2C1%2C8-8H88a32%2C32%2C0%2C0%2C1%2C32%2C32v87.73a8.17%2C8.17%2C0%2C0%2C0%2C7.47%2C8.25%2C8%2C8%2C0%2C0%2C0%2C8.53-8V80a32%2C32%2C0%2C0%2C1%2C32-32h64A8%2C8%2C0%2C0%2C1%2C240%2C56Z%22%2F%3E%3C%2Fsvg%3E");
}

/* Dark palette. Site-wide dark mode is driven by [data-theme] on <html>
   (theme.js) with prefers-color-scheme as the default; the base palette
   overrides live in furkspace.css, these are the wall/hero --fs-* tokens.
   The wall's world inverts: notes become deep saturated card stock, the
   chip accents lift so the category pill still reads, and the hero
   spectrum switches to the light accents so the glow survives on a
   near-black page. Both the media query (system pref, unless the visitor
   forced light) and the explicit [data-theme="dark"] carry the same set. */
:root[data-theme="dark"] {
	--fs-note-work:     #40340f;
	--fs-note-lab:      #123c38;
	--fs-note-table:    #2c2350;
	--fs-note-thoughts: #163a27;
	--fs-note-stories:  #48231a;
	--fs-chip-work:     #e6c078;
	--fs-chip-lab:      #79c9bf;
	--fs-chip-table:    #b6a3ee;
	--fs-chip-thoughts: #7dc79c;
	--fs-chip-stories:  #e2a184;
	--fs-note-ink:  #f3eee2;
	--fs-note-sub:  #b7ad97;
	--fs-tape:      rgba(240, 236, 224, 0.10);
	--fs-grain-opacity: 0.05;
	--fs-hero-bloom: 0.22;
	--fs-hero-spectrum: linear-gradient(
		100deg,
		var(--fs-chip-work) 0%, var(--fs-chip-stories) 27%, var(--fs-chip-table) 52%,
		var(--fs-chip-lab) 76%, var(--fs-chip-thoughts) 100%
	);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--fs-note-work:     #40340f;
		--fs-note-lab:      #123c38;
		--fs-note-table:    #2c2350;
		--fs-note-thoughts: #163a27;
		--fs-note-stories:  #48231a;
		--fs-chip-work:     #e6c078;
		--fs-chip-lab:      #79c9bf;
		--fs-chip-table:    #b6a3ee;
		--fs-chip-thoughts: #7dc79c;
		--fs-chip-stories:  #e2a184;
		--fs-note-ink:  #f3eee2;
		--fs-note-sub:  #b7ad97;
		--fs-tape:      rgba(240, 236, 224, 0.10);
		--fs-grain-opacity: 0.05;
		--fs-hero-bloom: 0.22;
		--fs-hero-spectrum: linear-gradient(
			100deg,
			var(--fs-chip-work) 0%, var(--fs-chip-stories) 27%, var(--fs-chip-table) 52%,
			var(--fs-chip-lab) 76%, var(--fs-chip-thoughts) 100%
		);
	}
}

/* ------------------------------------------------------------ container --- */

.fs-wall {
	position: relative;
	overflow-x: clip;
	/* side padding absorbs the notes' offset + tilt + hover scale so the
	   overflow-x clip never eats an edge column */
	padding: clamp(1rem, 4vw, 2.4rem) clamp(18px, 3vw, 40px) 4rem;
}

.fs-wall::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--fs-grain);
	background-size: 160px 160px;
	opacity: var(--fs-grain-opacity);
	pointer-events: none;
	z-index: 0;
}

.fs-wall > * {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------ filter bar -- */

.fs-wall__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.4rem;
	margin-bottom: clamp(1.4rem, 4vw, 2.6rem);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
}

.fs-wall__types,
.fs-wall__sorts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
}

.fs-sort__group {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
}

.fs-sort__label {
	color: var(--wp--preset--color--muted);
}

.fs-chip,
.fs-sort {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.fs-chip:hover,
.fs-sort:hover {
	border-color: var(--wp--preset--color--contrast);
}

.fs-chip.is-active,
.fs-sort.is-active {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--contrast);
}

.fs-chip__dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	flex: none;
}
.fs-chip--work     .fs-chip__dot { background: var(--fs-chip-work); }
.fs-chip--lab      .fs-chip__dot { background: var(--fs-chip-lab); }
.fs-chip--table    .fs-chip__dot { background: var(--fs-chip-table); }
.fs-chip--thoughts .fs-chip__dot { background: var(--fs-chip-thoughts); }
.fs-chip--stories  .fs-chip__dot { background: var(--fs-chip-stories); }

.fs-wall__view {
	display: inline-flex;
	gap: 0.25rem;
	margin-left: auto;
}

.fs-view {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}
.fs-view svg { width: 1.1rem; height: 1.1rem; }
.fs-view:hover { border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--contrast); }
.fs-view.is-active {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------ the grid ---- */

.fs-wall__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: clamp(16px, 2.4vw, 30px);
	align-items: start;
}

/* ------------------------------------------------------------ a note ------ */

.fs-note {
	--fs-note: var(--wp--preset--color--surface);
	--fs-chip: var(--wp--preset--color--muted);
	--fs-icon: none;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 10px 10px 12px;
	background: var(--fs-note);
	color: var(--fs-note-ink);
	border-radius: var(--fs-note-radius);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), 0 10px 22px rgba(0, 0, 0, 0.07);
	transform:
		translate(calc(var(--fs-x, 0px) * var(--fs-scatter)), calc(var(--fs-y, 0px) * var(--fs-scatter)))
		rotate(calc(var(--fs-rot, 0deg) * var(--fs-tilt)));
	transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.fs-note--work     { --fs-note: var(--fs-note-work);     --fs-chip: var(--fs-chip-work);     --fs-icon: var(--fs-icon-work); }
.fs-note--lab      { --fs-note: var(--fs-note-lab);      --fs-chip: var(--fs-chip-lab);      --fs-icon: var(--fs-icon-lab); }
.fs-note--table    { --fs-note: var(--fs-note-table);    --fs-chip: var(--fs-chip-table);    --fs-icon: var(--fs-icon-table); }
.fs-note--thoughts { --fs-note: var(--fs-note-thoughts); --fs-chip: var(--fs-chip-thoughts); --fs-icon: var(--fs-icon-thoughts); }
.fs-note--stories  { --fs-note: var(--fs-note-stories);  --fs-chip: var(--fs-chip-stories);  --fs-icon: var(--fs-icon-stories); }

.fs-note:hover,
.fs-note:focus-within {
	transform:
		translate(calc(var(--fs-x, 0px) * var(--fs-scatter)), calc(var(--fs-y, 0px) * var(--fs-scatter) - 6px))
		rotate(0) scale(1.03);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18), 0 18px 40px rgba(0, 0, 0, 0.12);
	z-index: 3;
}

/* tape */
.fs-note__tape {
	position: absolute;
	top: -10px;
	width: 74px;
	height: 22px;
	background: var(--fs-tape);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	pointer-events: none;
}
.fs-note[data-tape="0"] .fs-note__tape { left: 12%; transform: rotate(-5deg); }
.fs-note[data-tape="1"] .fs-note__tape { left: 50%; transform: translateX(-50%) rotate(1.5deg); }
.fs-note[data-tape="2"] .fs-note__tape { right: 12%; transform: rotate(4deg); }

/* category tag — area glyph + name, on the area accent. Overlaid on the crop
   for grid notes; re-positioned into the body for featured notes below. */
.fs-note__cat {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.34rem;
	max-width: calc(100% - 24px);
	padding: 0.24rem 0.54rem 0.24rem 0.4rem;
	border-radius: 999px;
	background: var(--fs-chip);
	color: var(--fs-note);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.fs-note__cat-icon {
	flex: none;
	width: 0.86rem;
	height: 0.86rem;
	background: currentColor;
	-webkit-mask: var(--fs-icon) center / contain no-repeat;
	        mask: var(--fs-icon) center / contain no-repeat;
}

/* media */
.fs-note__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: 2px;
	overflow: hidden;
	background: color-mix(in srgb, var(--fs-chip) 22%, var(--fs-note));
}
.fs-note__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.fs-note__media--empty::after {
	content: "";
	position: absolute;
	inset: 28%;
	background: var(--fs-chip);
	opacity: 0.55;
	-webkit-mask: var(--fs-icon) center / contain no-repeat;
	mask: var(--fs-icon) center / contain no-repeat;
}

.fs-note__title {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--fs-note-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fs-note__title a {
	color: inherit;
	text-decoration: none;
}
.fs-note__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fs-note__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.55rem;
}
.fs-note__date {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.72rem;
	color: var(--fs-note-sub);
}
.fs-note__foot .furkspace-like {
	position: relative;
	z-index: 2;
	color: var(--fs-note-sub);
	font-size: 0.74rem;
}
.fs-note__foot .furkspace-like:hover,
.fs-note__foot .furkspace-like.is-liked {
	color: var(--fs-heart);
}

.fs-note__excerpt {
	margin: 0.45rem 0 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--fs-note-sub);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* keep clamp working even where a global rule computes display as flow-root */
.fs-note .fs-note__title,
.fs-note .fs-note__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ------------------------------------------------------------ featured ---
   Bands above the grid. One → full width; exactly two → side by side (each
   min 460px, else they stack). Big square photo left, a real preview right,
   kicker + adaptive meta + thread pills, a prominent corner like chip. */

.fs-wall__featured {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2.4vw, 30px);
	margin-bottom: clamp(20px, 3vw, 36px);
}

.fs-note--featured {
	flex: 1 1 460px;
	flex-direction: row;
	align-items: stretch;
	gap: 24px;
	padding: 18px;
	transform: none;
}
.fs-note--featured:hover,
.fs-note--featured:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16), 0 20px 44px rgba(0, 0, 0, 0.1);
}
.fs-note--featured .fs-note__media {
	flex: none;
	align-self: flex-start;
	width: clamp(180px, 30%, 320px);
	aspect-ratio: 1;
}
.fs-wall__featured[data-count="1"] .fs-note--featured .fs-note__media {
	width: clamp(220px, 26%, 360px);
}
.fs-note--featured .fs-note__media img {
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fs-note--featured:hover .fs-note__media img,
.fs-note--featured:focus-within .fs-note__media img {
	transform: scale(1.045);
}
.fs-note--featured .fs-note__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	position: relative;
	padding-right: 2.5rem; /* room for the corner like chip */
}
.fs-note--featured .fs-note__cat {
	position: static;
	align-self: flex-start;
	margin: 0 0 0.7rem;
	padding: 0.3rem 0.66rem 0.3rem 0.5rem;
	font-size: 0.7rem;
	letter-spacing: 0.09em;
}
.fs-note--featured .fs-note__cat-icon {
	width: 0.95rem;
	height: 0.95rem;
}
.fs-note--featured .fs-note__title {
	margin: 0;
	font-size: clamp(1.45rem, 2.1vw, 1.95rem);
	line-height: 1.14;
	-webkit-line-clamp: 2;
	max-width: 22ch;
}
.fs-note--featured .fs-note__excerpt {
	/* card_summary is capped server-side (FURKSPACE_CORE_SUMMARY_MAX) to fit
	   here in full; the clamp is only a floor for a narrowed column. */
	-webkit-line-clamp: 6;
	max-width: 62ch;
	font-size: 0.94rem;
	line-height: 1.55;
	margin-top: 0.6rem;
}
.fs-note--featured .fs-note__meta {
	margin: 0.55rem 0 0;
	font-size: 0.74rem;
	color: var(--fs-note-sub);
}
.fs-note__threads {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.7rem;
	position: relative;
	z-index: 2;
}
.fs-note__thread {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.7rem;
	line-height: 1;
	padding: 0.28rem 0.55rem;
	border-radius: 999px;
	text-decoration: none;
	color: var(--fs-note-ink);
	background: color-mix(in srgb, var(--fs-chip) 16%, transparent);
}
.fs-note__thread:hover {
	background: color-mix(in srgb, var(--fs-chip) 28%, transparent);
}
.fs-note--featured .fs-note__foot {
	margin-top: auto;
	padding-top: 1rem;
	align-items: baseline;
}
.fs-note__footline {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
}
.fs-note__more {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--fs-chip);
}
/* prominent corner like chip */
.fs-note--featured .fs-note__foot .furkspace-like {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 0.45rem 0.8rem;
	gap: 0.42rem;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16);
	font-size: 0.88rem;
	color: var(--fs-note-sub);
}
.fs-note--featured .fs-note__foot .furkspace-like .furkspace-like__heart {
	width: 1.3em;
	height: 1.3em;
}
.fs-note--featured .fs-note__foot .furkspace-like:hover,
.fs-note--featured .fs-note__foot .furkspace-like.is-liked {
	color: var(--fs-heart);
}

@media (max-width: 560px) {
	.fs-note--featured {
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.fs-note--featured .fs-note__media,
	.fs-wall__featured[data-count="1"] .fs-note--featured .fs-note__media {
		width: 100%;
		align-self: auto;
		aspect-ratio: 3 / 2; /* a banner, not a full-width square */
	}
	.fs-note--featured .fs-note__body { padding-right: 0; padding-bottom: 2.6rem; }
	.fs-note--featured .fs-note__title { -webkit-line-clamp: 3; }
}

@media (prefers-reduced-motion: reduce) {
	.fs-note--featured .fs-note__media img { transition: none; }
	.fs-note--featured:hover .fs-note__media img,
	.fs-note--featured:focus-within .fs-note__media img { transform: none; }
}

/* ------------------------------------------------------------ list view -- */

.fs-wall__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.fs-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.fs-row__media {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.fs-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-row__main { flex: 1; min-width: 0; }
.fs-row__title {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.fs-row__title:hover { text-decoration: underline; }
.fs-row__meta {
	display: flex;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	margin-top: 0.15rem;
}
.fs-row__tag { position: relative; padding-left: 0.8rem; }
.fs-row__tag::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.32em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
}
.fs-row--work     .fs-row__tag::before { background: var(--fs-chip-work); }
.fs-row--lab      .fs-row__tag::before { background: var(--fs-chip-lab); }
.fs-row--table    .fs-row__tag::before { background: var(--fs-chip-table); }
.fs-row--thoughts .fs-row__tag::before { background: var(--fs-chip-thoughts); }
.fs-row--stories  .fs-row__tag::before { background: var(--fs-chip-stories); }
.fs-row .furkspace-like { flex: none; }

/* ------------------------------------------------------------ misc -------- */

.fs-wall__more {
	display: block;
	width: fit-content;
	margin: 2.4rem auto 0;
	padding: 0.6rem 1.4rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.fs-wall__more:hover { border-color: var(--wp--preset--color--contrast); }
.fs-wall__more[hidden] { display: none; }
.fs-wall__more.is-busy { opacity: 0.6; pointer-events: none; }

.fs-wall__empty {
	grid-column: 1 / -1;
	padding: 3rem 0;
	text-align: center;
	color: var(--wp--preset--color--muted);
}

/* Desktop: the scatter is a phone-and-tablet gag. Above 1024px the wall
   snaps to a strict grid — only the seeded ≤1.5° tilt and the tape stay. */
@media (min-width: 1024px) {
	.fs-wall { --fs-scatter: 0; --fs-tilt: 1; }
	.fs-wall__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

@media (max-width: 600px) {
	.fs-wall { --fs-scatter: 0.35; }
	.fs-wall__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

	/* the bar collapses to two horizontal scroll strips + the view toggle,
	   instead of five wrapped rows */
	.fs-wall__bar { align-items: stretch; gap: 0.5rem; }
	.fs-wall__types,
	.fs-wall__sorts {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px;
		-webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
		mask-image: linear-gradient(90deg, #000 92%, transparent);
	}
	.fs-wall__types::-webkit-scrollbar,
	.fs-wall__sorts::-webkit-scrollbar { display: none; }
	.fs-wall__sorts .fs-sort__group { display: contents; }
	.fs-chip,
	.fs-sort,
	.fs-sort__label { flex: none; }
	.fs-wall__view { margin-left: 0; align-self: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	.fs-note { transition: box-shadow 0.14s ease; }
	.fs-note:hover,
	.fs-note:focus-within {
		transform:
			translate(calc(var(--fs-x, 0px) * var(--fs-scatter)), calc(var(--fs-y, 0px) * var(--fs-scatter)))
			rotate(calc(var(--fs-rot, 0deg) * var(--fs-tilt)));
	}
}

@media print {
	.fs-wall::before,
	.fs-wall__view,
	.fs-wall__more,
	.fs-note__tape { display: none; }
	.fs-wall__grid { display: block; }
	.fs-note { transform: none; box-shadow: none; border: 1px solid #ccc; margin-bottom: 0.5rem; }
}

/* ============================================================ hero ======
   Front-page hero. Not a "hero section" — no panel, no edge. The intro is
   the first thing pinned to the same paper the wall sits on; a single
   fixed spectrum glow bleeds off the top of the page. Desktop is an
   editorial two-column split (lead / live "Now" index). The entrance is
   JS-armed progressive enhancement (once per session) and drops whole
   under prefers-reduced-motion. Tokens stay on :root for later tuning. */

:root {
	--fs-hero-spread: 1;    /* pointer-parallax travel multiplier (0 disables) */
	--fs-hero-px: 0;        /* -0.5..0.5 pointer offset, set by wall.js */
	--fs-hero-py: 0;
	--fs-hero-bloom: 0.32;  /* glow opacity — lowered in dark mode */
	--fs-hero-spectrum: linear-gradient(
		100deg,
		var(--fs-note-work)     0%,
		var(--fs-note-stories)  27%,
		var(--fs-note-table)    52%,
		var(--fs-note-lab)      76%,
		var(--fs-note-thoughts) 100%
	);
}

.fs-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(1.5rem, 5vw, 4rem);
	align-items: start;
	padding-block: clamp(2rem, 7vw, 5rem) clamp(1.6rem, 4vw, 2.75rem);
}
@media (max-width: 900px) {
	.fs-hero { grid-template-columns: 1fr; gap: clamp(1.4rem, 6vw, 2.2rem); }
}

/* one glow for the whole page — fixed, ≤480px tall, bleeds off the top,
   fades to nothing. Nudged toward the pointer on desktop by wall.js. */
.fs-hero__glow {
	position: fixed;
	inset: 0 0 auto 0;
	height: 480px;
	z-index: -1;
	background: var(--fs-hero-spectrum);
	opacity: var(--fs-hero-bloom);
	filter: blur(72px) saturate(1.2);
	-webkit-mask: radial-gradient(80% 100% at 28% 0%, #000 6%, transparent 72%);
	        mask: radial-gradient(80% 100% at 28% 0%, #000 6%, transparent 72%);
	transform: translate3d(
		calc(var(--fs-hero-px) * 26px * var(--fs-hero-spread)),
		calc(var(--fs-hero-py) * 16px * var(--fs-hero-spread)),
		0
	);
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
	pointer-events: none;
	will-change: transform;
}

.fs-hero__title {
	margin: 0;
	max-width: 16ch;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(2.4rem, 6.4vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
}

/* the spectrum enters through one word, as a gradient underline — not a
   floating rule. Text stays ink-coloured (contrast-safe). */
.fs-hero__spark {
	background-image: var(--fs-hero-spectrum);
	background-repeat: no-repeat;
	background-position: 0 92%;
	background-size: 100% 0.14em;
	padding-bottom: 0.04em;
}

.fs-hero__thesis {
	margin: clamp(0.9rem, 2.5vw, 1.5rem) 0 0;
	max-width: 40ch;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
}

/* live "Now" index — latest entry + per-area counts. This is the colour
   legend for the wall below, so it is styled as an index, never as pills. */
.fs-hero__now {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
@media (min-width: 901px) {
	.fs-hero__now {
		padding-left: clamp(1rem, 2.5vw, 2rem);
		border-left: 1px solid var(--wp--preset--color--border);
	}
}
.fs-hero__now-kicker {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.15rem;
}
.fs-hero__now-latest {
	margin: 0 0 clamp(0.9rem, 2vw, 1.3rem);
	padding-bottom: clamp(0.9rem, 2vw, 1.3rem);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.fs-hero__now-latest a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 600;
}
.fs-hero__now-latest a:hover { text-decoration: underline; }
.fs-hero__now-latest time {
	display: block;
	margin-top: 0.15rem;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
}
.fs-hero__now-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.fs-hero__now-item {
	display: grid;
	grid-template-columns: 0.6rem 1fr auto;
	align-items: center;
	gap: 0.55rem;
}
.fs-hero__now-dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
}
.fs-hero__now-item--work     .fs-hero__now-dot { background: var(--fs-chip-work); }
.fs-hero__now-item--lab      .fs-hero__now-dot { background: var(--fs-chip-lab); }
.fs-hero__now-item--table    .fs-hero__now-dot { background: var(--fs-chip-table); }
.fs-hero__now-item--thoughts .fs-hero__now-dot { background: var(--fs-chip-thoughts); }
.fs-hero__now-item--stories  .fs-hero__now-dot { background: var(--fs-chip-stories); }
.fs-hero__now-item a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.fs-hero__now-item a:hover { text-decoration: underline; }
.fs-hero__now-item b {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--muted);
}

/* kinetic entrance ------------------------------------------------------
   Default state is fully visible (no JS needed). wall.js adds .is-ready to
   arm the pre-roll, then .is-in to play it — and skips straight to .is-in
   after the first view in a session. */

.fs-hero__word { display: inline-block; }
.fs-hero.is-ready .fs-hero__word {
	opacity: 0;
	transform: translateY(0.5em) rotate(3deg);
}
.fs-hero.is-ready .fs-hero__thesis,
.fs-hero.is-ready .fs-hero__now {
	opacity: 0;
	transform: translateY(0.6rem);
}
.fs-hero.is-in .fs-hero__word {
	opacity: 1;
	transform: none;
	transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
	transition-delay: calc(var(--i, 0) * 50ms);
}
.fs-hero.is-in .fs-hero__thesis,
.fs-hero.is-in .fs-hero__now {
	opacity: 1;
	transform: none;
	transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
}
.fs-hero.is-in .fs-hero__thesis { transition-delay: 0.3s; }
.fs-hero.is-in .fs-hero__now    { transition-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
	.fs-hero__glow { transition: none; transform: none; }
	.fs-hero.is-ready .fs-hero__word,
	.fs-hero.is-ready .fs-hero__thesis,
	.fs-hero.is-ready .fs-hero__now,
	.fs-hero.is-in .fs-hero__word,
	.fs-hero.is-in .fs-hero__thesis,
	.fs-hero.is-in .fs-hero__now {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 600px) {
	.fs-hero { --fs-hero-spread: 0; }
	.fs-hero__title { font-size: clamp(2.1rem, 9vw, 3rem); }
}