/* BSHP — warm-monochrome, chess-strategy portfolio theme */

/* Checkmate intro — diagram-style two-bishop mate (B/W) --------------- */
html.bshp-intro-pending body {
	overflow: hidden;
}
html.bshp-intro-pending #site-main,
html.bshp-intro-pending .bshp-header,
html.bshp-intro-pending .bshp-drawer,
html.bshp-intro-pending footer {
	opacity: 0;
	pointer-events: none;
}

#bshp-intro {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	background: #000;
	transition: opacity .7s ease, visibility .7s ease;
}
#bshp-intro.is-done {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.bshp-intro-board {
	position: relative;
	width: min(86vw, 400px);
	height: min(86vw, 400px);
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(8, 1fr);
	border: 3px solid #ffffff;
	box-shadow:
		0 0 0 8px #000,
		0 0 0 9px rgba(255,255,255,0.4),
		0 28px 70px rgba(0,0,0,0.7);
	overflow: hidden;
}

.bshp-intro-sq.is-light { background: #f4f0e8; }
.bshp-intro-sq.is-dark  { background: #3d3d3d; }

/* Overlay layer — pieces never compete with grid placement */
.bshp-intro-pieces {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.bshp-intro-piece {
	position: absolute;
	width: 12.5%;
	height: 12.5%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 6;
}

.bshp-intro-glyph {
	font-size: clamp(1.85rem, 7.5vw, 2.85rem);
	line-height: 1;
	font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols', serif;
	speak: never;
}

/* Black piece — solid dark with white halo so it reads on any square */
.bshp-intro-piece.is-black .bshp-intro-glyph {
	color: #0a0a0a;
	-webkit-text-stroke: 1px #fff;
	paint-order: stroke fill;
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}

/* White piece — cream fill with dark edge */
.bshp-intro-piece.is-white .bshp-intro-glyph {
	color: #faf7f2;
	-webkit-text-stroke: 1.25px #111;
	paint-order: stroke fill;
	filter: drop-shadow(0 2px 5px rgba(0,0,0,0.65));
}

.bshp-intro-piece.is-mover {
	z-index: 8;
	transition: left 1.35s cubic-bezier(.55,0,.15,1), top 1.35s cubic-bezier(.55,0,.15,1);
}
.bshp-intro-piece.is-mover .bshp-intro-glyph {
	filter:
		drop-shadow(0 0 10px rgba(217,119,86,0.75))
		drop-shadow(0 2px 5px rgba(0,0,0,0.65));
	transition: filter .3s ease;
}

#bshp-intro.is-ready .bshp-intro-piece {
	opacity: 1;
}

#bshp-intro.is-playing .bshp-intro-piece.is-mover {
	left: 12.5% !important;
	top: 12.5% !important;
}
#bshp-intro.is-playing .bshp-intro-piece.is-mover .bshp-intro-glyph {
	filter:
		drop-shadow(0 0 16px rgba(217,119,86,1))
		drop-shadow(0 2px 6px rgba(0,0,0,0.7));
}

#bshp-intro.is-mate .bshp-intro-piece.is-black {
	animation: bshp-intro-shake 0.5s ease;
}
@keyframes bshp-intro-shake {
	0%,100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

.bshp-intro-label {
	margin: 0.35rem 0 0;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
	opacity: 0;
	transition: opacity .4s ease, color .4s ease;
}
#bshp-intro.is-mate .bshp-intro-label {
	opacity: 1;
	color: #fff;
}

.bshp-intro-sub {
	margin: 0;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.28em;
	color: #d97756;
	opacity: 0;
	transition: opacity .35s ease;
}
#bshp-intro.is-mate .bshp-intro-sub {
	opacity: 1;
}

:root {
	--bshp-bg:      #0f0d0b;
	--bshp-fg:      #f5f1ea;
	--bshp-muted:   #8a847a;
	--bshp-line:    #26221e;
	--bshp-panel:   #17140f;
	--bshp-accent:  #d97756;   /* single warm accent */
	--bshp-invert-bg: #f5f1ea;
	--bshp-invert-fg: #0f0d0b;
}

html.theme-light {
	--bshp-bg:      #f5f1ea;
	--bshp-fg:      #16130f;
	--bshp-muted:   #6a6459;
	--bshp-line:    #d9d2c4;
	--bshp-panel:   #ece5d6;
	--bshp-invert-bg: #16130f;
	--bshp-invert-fg: #f5f1ea;
}

html, body { background: var(--bshp-bg); color: var(--bshp-fg); transition: background 0.35s ease, color 0.35s ease; }

body {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.font-display { font-family: 'PP Neue Montreal', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif; letter-spacing: -0.035em; }
.font-mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; }

::selection { background: var(--bshp-accent); color: var(--bshp-invert-fg); }

/* Utility color aliases the templates use */
.bg-bshp   { background: var(--bshp-bg); }
.bg-panel  { background: var(--bshp-panel); }
.text-fg   { color: var(--bshp-fg); }
.text-muted{ color: var(--bshp-muted); }
.border-line { border-color: var(--bshp-line); }
.text-accent { color: var(--bshp-accent); }
.bg-accent   { background: var(--bshp-accent); }

/* Header ---------------------------------------------------------------- */
.bshp-header {
	background: color-mix(in oklab, var(--bshp-bg) 70%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--bshp-line);
}
.bshp-brand {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
}

.bshp-cta {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.5rem 1rem; border-radius: 9999px;
	background: var(--bshp-fg); color: var(--bshp-bg);
	font-size: 12px; letter-spacing: 0.02em;
	transition: transform .2s ease, background .2s ease, color .2s ease;
}
.bshp-cta:hover { transform: translateY(-1px); background: var(--bshp-accent); color: var(--bshp-invert-fg); }

.bshp-iconbtn {
	width: 34px; height: 34px; border-radius: 9999px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0;
	color: var(--bshp-fg);
	background: transparent;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bshp-iconbtn:hover { background: var(--bshp-fg); color: var(--bshp-bg); }

.bshp-menu-toggle {
	display: inline-flex; align-items: center; gap: 0.7rem;
	padding: 0.4rem 0.1rem 0.4rem 0.7rem;
	border: 0;
	border-radius: 0;
	font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
	transition: background .2s ease, color .2s ease;
}
.bshp-menu-toggle:hover { color: var(--bshp-accent); }
.bshp-menu-toggle .plus {
	display: inline-block;
	font-family: Arial, sans-serif;
	font-size: 26px;
	font-weight: 300;
	line-height: 0.7;
	letter-spacing: 0;
	transition: transform .3s ease;
}
.bshp-menu-toggle[aria-expanded="true"] .plus { transform: rotate(45deg); }

/* Drawer menu */
.bshp-drawer {
	position: fixed; inset: 64px 0 0 0; z-index: 40;
	background: var(--bshp-bg);
	transform: translateY(-100%);
	transition: transform .5s cubic-bezier(.7,0,.2,1);
	border-bottom: 1px solid var(--bshp-line);
}
.bshp-drawer.is-open { transform: translateY(0); }
.bshp-drawer ul { list-style: none; margin: 0; padding: 0; }
.bshp-drawer a {
	display: block; padding: 1.25rem 0;
	font-family: 'PP Neue Montreal', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(2rem, 7vw, 5rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--bshp-fg);
	transition: color .2s ease, transform .3s ease;
}
.bshp-drawer a:hover { color: var(--bshp-accent); transform: translateX(8px); }
.bshp-drawer li + li { border-top: 1px solid var(--bshp-line); }

/* Physics stage --------------------------------------------------------- */
#physics-stage { touch-action: none; }

/* Mobile: empty stage scrolls; a gesture starting on a piece drags that piece. */
@media (max-width: 767px) {
	#physics-stage { touch-action: pan-y !important; }
	#physics-stage .interactive-physics-item { touch-action: none !important; }
}

/* Hero chessboard (preview — remove with chessboard.js) --------------- */
.bshp-chessboard {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(8, 1fr);
	pointer-events: none;
	z-index: 0;
	opacity: 0.55;
}
.bshp-chess-sq.is-light { background: transparent; }
.bshp-chess-sq.is-dark {
	background: color-mix(in oklab, var(--bshp-fg) 4.5%, transparent);
}
html.theme-light .bshp-chess-sq.is-dark {
	background: color-mix(in oklab, #000 7%, transparent);
}
html.theme-light .bshp-chessboard {
	opacity: 0.7;
}
html.theme-light #hero.is-chess-play .bishop-piece {
	filter: drop-shadow(0 0 10px rgba(217,119,86,0.4));
}

.bshp-chess-highlight {
	display: none !important; /* no square light */
}

.bshp-chess-whisper {
	position: absolute;
	left: 1.25rem;
	bottom: 1.1rem;
	z-index: 12;
	pointer-events: none;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bshp-muted);
	opacity: 0.85;
}
.bshp-chess-whisper.is-pop {
	animation: bshp-whisper-pop .35s ease;
}
@keyframes bshp-whisper-pop {
	0%   { opacity: 0.35; transform: translateY(4px); }
	100% { opacity: 0.85; transform: translateY(0); }
}

@media (max-width: 767px) {
	.bshp-chess-ui {
		display: none !important; /* no Play game on mobile */
	}
	.bshp-chessboard { opacity: 0.4; }
	.bshp-chess-whisper {
		left: 1.1rem;
		bottom: 0.85rem;
		font-size: 9px;
	}
}

.bshp-chess-ui {
	position: absolute;
	top: 5rem;
	right: 1.25rem;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	pointer-events: auto;
}
.bshp-chess-play {
	display: inline-flex;
	align-items: center;
	padding: 0.45rem 0.95rem;
	border-radius: 9999px;
	border: 1px solid var(--bshp-line);
	background: var(--bshp-fg);
	color: var(--bshp-bg);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.bshp-chess-play:hover {
	background: var(--bshp-accent);
	color: var(--bshp-invert-fg);
	transform: translateY(-1px);
}
.bshp-chess-score {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bshp-muted);
}
.bshp-chess-score b {
	color: var(--bshp-accent);
	font-weight: 500;
}

.bshp-chess-hint {
	position: absolute;
	width: 12.5%;
	height: 12.5%;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.bshp-chess-hint::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 9999px;
	background: color-mix(in oklab, var(--bshp-fg) 35%, transparent);
}
.bshp-chess-hint.is-capture::after {
	width: 18px;
	height: 18px;
	background: transparent;
	border: 2px solid var(--bshp-accent);
	box-shadow: 0 0 16px color-mix(in oklab, var(--bshp-accent) 50%, transparent);
}

#hero.is-chess-play #physics-stage {
	cursor: crosshair;
}
#hero.is-chess-play .interactive-physics-item {
	cursor: default;
}
#hero.is-chess-play .bishop-piece {
	cursor: pointer;
	filter: drop-shadow(0 0 12px rgba(217,119,86,0.45));
	z-index: 15 !important;
}
#hero.is-chess-play .is-opponent {
	outline: 1px solid color-mix(in oklab, var(--bshp-fg) 20%, transparent);
}

#physics-stage .interactive-physics-item { z-index: 2; }
#physics-stage .bshp-bishop-trails { z-index: 3; }

.interactive-physics-item {
	will-change: transform;
	user-select: none;
	-webkit-user-select: none;
	cursor: grab;
	transform-origin: center center;
}
.interactive-physics-item:active { cursor: grabbing; }

/* Pill sticker — the recognizable "capsule chip" */
.bshp-pill {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .85rem 1.5rem;
	border-radius: 9999px;
	border: 2px solid var(--bshp-fg);
	background: var(--bshp-bg);
	color: var(--bshp-fg);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
	white-space: nowrap;
}
.bshp-pill.is-solid {
	background: var(--bshp-fg); color: var(--bshp-bg);
	border-color: var(--bshp-fg);
}
.bshp-pill.is-accent {
	background: var(--bshp-accent); color: var(--bshp-invert-fg);
	border-color: var(--bshp-accent);
}

.bshp-chip-round {
	width: 78px; height: 78px; border-radius: 9999px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 2px solid var(--bshp-fg);
	background: var(--bshp-bg);
	font-size: 26px;
	font-weight: 600;
}
.bshp-chip-round.is-solid { background: var(--bshp-fg); color: var(--bshp-bg); }

/* Bishop — largest physics piece */
/* Bishop — largest physics piece */
.bshp-bishop-img {
	width: 110px; height: 110px;
	display: block;
	color: var(--bshp-fg);
	stroke-width: 3;
	filter: drop-shadow(0 12px 28px rgba(0,0,0,0.25));
	pointer-events: none;
}
.bshp-bishop-body {
	fill: var(--bshp-bg);
	stroke: var(--bshp-fg);
}
@media (min-width: 768px) {
	.bshp-bishop-img { width: 132px; height: 132px; }
}

/* Bishop mascot FX — glow + trail (works in light + dark) --------------- */
.bshp-bishop-mascot .bshp-bishop-img {
	transition: filter .35s ease, color .35s ease;
}
.bshp-bishop-mascot.is-idle .bshp-bishop-img {
	animation: bshp-bishop-glow 3.2s ease-in-out infinite;
}
@keyframes bshp-bishop-glow {
	0%,100% { filter: drop-shadow(0 0 2px rgba(217,119,86,0.2)) drop-shadow(0 10px 22px rgba(0,0,0,0.2)); }
	50%     { filter: drop-shadow(0 0 14px rgba(217,119,86,0.55)) drop-shadow(0 10px 22px rgba(0,0,0,0.2)); }
}
.bshp-bishop-mascot.is-moving .bshp-bishop-img {
	filter: drop-shadow(0 0 12px rgba(217,119,86,0.55)) drop-shadow(0 8px 18px rgba(0,0,0,0.25));
	animation: none;
}

.bshp-bishop-trails {
	position: absolute; inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}
.bshp-bishop-ghost {
	position: absolute;
	opacity: 0.4;
	pointer-events: none;
	color: var(--bshp-fg);
	transition: opacity .4s ease, transform .4s ease;
}
.bshp-bishop-ghost svg {
	width: 100%;
	height: 100%;
	display: block;
}
.bshp-bishop-ghost .bshp-bishop-body {
	fill: var(--bshp-bg);
	stroke: var(--bshp-fg);
}
.bshp-bishop-ghost.is-fading {
	opacity: 0;
	transform: scale(0.92);
}

/* Treble clef — free glyph, not in a circle */
.bshp-clef {
	display: block;
	font-size: 72px;
	line-height: 1;
	color: var(--bshp-fg);
	font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Music', 'Noto Sans Symbols 2', serif;
	-webkit-text-stroke: 0.45px currentColor;
	filter: drop-shadow(0 8px 20px rgba(0,0,0,0.3));
	user-select: none;
}
@media (min-width: 768px) {
	.bshp-clef { font-size: 92px; }
}

/* Bishop idle wobble when nothing is happening */
.interactive-physics-item.is-idle .bshp-inner {
	animation: bshp-idle 3.6s ease-in-out infinite;
}
@keyframes bshp-idle {
	0%,100% { transform: translateY(0) rotate(0deg); }
	50%     { transform: translateY(-4px) rotate(1.2deg); }
}

/* Down-arrow indicator */
.bshp-down {
	width: 62px; height: 62px; border-radius: 9999px;
	border: 1.5px solid var(--bshp-fg);
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .2s ease, color .2s ease, transform .3s ease;
}
.bshp-down:hover { background: var(--bshp-fg); color: var(--bshp-bg); transform: translateY(2px); }
.bshp-down svg { animation: bshp-bob 1.8s ease-in-out infinite; }
@keyframes bshp-bob {
	0%,100% { transform: translateY(-3px); opacity: .7; }
	50%     { transform: translateY(3px);  opacity: 1; }
}

/* Display headline — huge, edge-to-edge like the reference */
.bshp-display {
	font-family: 'PP Neue Montreal', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 600;
	font-size: clamp(3.5rem, 15.5vw, 15rem);
	line-height: 0.85;
	letter-spacing: -0.06em;
	white-space: nowrap;
}

/* Hero copy placement */
.bshp-hero-copy {
	bottom: 0;
	padding-bottom: 4rem;
}
.bshp-hero-sub {
	display: block;
	margin-top: 1.5rem;
	max-width: 36rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--bshp-muted);
	opacity: 1;
	visibility: visible;
	filter: none;
}

/* Mobile hero — cluster top, wordmark raised like IYAD (~55%) ---------- */
@media (max-width: 767px) {
	.bshp-desktop-only { display: none !important; }

	.bshp-hero-copy {
		top: 57%;
		bottom: 4.5rem;
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	.bshp-display {
		font-size: clamp(7rem, 35vw, 10rem);
		font-weight: 700;
		white-space: nowrap;
		line-height: 0.78;
		letter-spacing: -0.075em;
	}
	.bshp-hero-sub {
		display: block !important;
		margin-top: 1rem;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.55;
		max-width: 20rem;
		color: var(--bshp-fg) !important;
		opacity: 1 !important;
		visibility: visible !important;
		filter: none !important;
		position: relative;
		z-index: 12;
	}

	.bshp-chip-round {
		width: 58px; height: 58px;
		font-size: 24px;
		border-width: 2px;
	}
	.bshp-chip-round.is-solid {
		background: var(--bshp-fg);
		color: var(--bshp-bg);
		border-color: var(--bshp-fg);
		width: 64px; height: 64px;
		font-size: 28px;
		font-weight: 500;
	}

	.bshp-pill {
		padding: 0.55rem 0.95rem;
		font-size: 10.5px;
		letter-spacing: 0.12em;
		border-width: 2px;
	}

	.bshp-bishop-img {
		width: 78px; height: 78px;
	}
	.bshp-clef {
		font-size: 52px;
	}

	.bshp-header nav {
		padding-left: 1.1rem;
		padding-right: 1.1rem;
		height: 3.25rem;
	}
	.bshp-brand {
		font-size: 12px;
	}
	.bshp-header .bshp-menu-toggle {
		text-transform: uppercase;
		letter-spacing: 0.14em;
		font-size: 11px;
		padding: 0.35rem 0.65rem;
		border: none;
		background: transparent;
	}
	.bshp-header .bshp-menu-toggle:hover {
		background: transparent;
		color: var(--bshp-fg);
	}
	.bshp-iconbtn {
		width: 30px; height: 30px;
		border: none;
	}
}

/* Scroll blur reveal — JS drives the blur; start sharp if no-JS / before init */
.scroll-blur-text {
	will-change: filter, opacity;
}

/* Selected works list --------------------------------------------------- */
.bshp-work-list { width: 100%; }

.bshp-work-row {
	position: relative;
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 0.75rem 1.25rem;
	align-items: center;
	padding: 1.6rem 0.5rem;
	border-bottom: 1px solid var(--bshp-line);
	color: inherit;
	text-decoration: none;
	transition: background .25s ease;
}
@media (min-width: 900px) {
	.bshp-work-row {
		grid-template-columns: 3.5rem minmax(12rem, 1.1fr) minmax(12rem, 1fr) 4rem;
		gap: 1.5rem;
		padding: 1.85rem 0.75rem;
	}
}

.bshp-work-row:hover,
.bshp-work-row.is-active {
	background: color-mix(in oklab, var(--bshp-panel) 85%, transparent);
}

.bshp-work-num {
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--bshp-muted);
	font-variant-numeric: tabular-nums;
}

.bshp-work-title-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem 0.75rem;
	min-width: 0;
}

.bshp-work-title {
	font-family: 'PP Neue Montreal', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(1.6rem, 3.2vw, 2.65rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--bshp-fg);
	transition: color .25s ease;
}
.bshp-work-row:hover .bshp-work-title,
.bshp-work-row.is-active .bshp-work-title {
	color: var(--bshp-accent);
}

.bshp-work-badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.bshp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.55rem;
	border-radius: 9999px;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: none;
	background: var(--bshp-panel);
	border: 1px solid var(--bshp-line);
	color: var(--bshp-muted);
	white-space: nowrap;
}
.bshp-badge.is-prize {
	background: color-mix(in oklab, var(--bshp-accent) 22%, transparent);
	border-color: color-mix(in oklab, var(--bshp-accent) 55%, transparent);
	color: var(--bshp-accent);
}
.bshp-badge.is-new {
	background: #c23a3a;
	border-color: #c23a3a;
	color: #fff;
}

.bshp-work-desc {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--bshp-muted);
	max-width: 28rem;
}
@media (max-width: 899px) {
	.bshp-work-desc { grid-column: 2 / -1; }
	.bshp-work-year { display: none; }
}

.bshp-work-year {
	justify-self: end;
	font-size: 12px;
	color: var(--bshp-muted);
	font-variant-numeric: tabular-nums;
}

/* Floating hover preview card */
.bshp-work-preview {
	position: fixed;
	top: 0; left: 0;
	width: min(320px, 42vw);
	aspect-ratio: 4 / 3;
	pointer-events: none;
	opacity: 0;
	transform: translate3d(-40%, -40%, 0) scale(0.92);
	transition: opacity .2s ease, transform .2s ease;
	z-index: 80;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0,0,0,0.45);
	border: 1px solid rgba(255,255,255,0.12);
}
.bshp-work-preview.is-visible {
	opacity: 1;
	transform: translate3d(-40%, -40%, 0) scale(1);
}
.bshp-work-preview img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
@media (hover: none), (max-width: 899px) {
	.bshp-work-preview { display: none !important; }
}

/* Contact — portrait + Let's talk + action pills ------------------------- */
.bshp-contact-photo {
	border-radius: 22px;
	display: block;
	background: linear-gradient(160deg, #2a2622 0%, #16130f 100%);
	transform: perspective(900px) rotateX(0deg) rotateY(0deg);
	transform-style: preserve-3d;
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
	will-change: transform;
	box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.bshp-contact-photo-wrap {
	perspective: 900px;
	transform-style: preserve-3d;
}
.bshp-contact-photo:hover {
	box-shadow: 0 28px 70px rgba(0,0,0,0.5);
	transition: transform .08s linear, box-shadow .35s ease;
}
.bshp-contact-photo--empty {
	border: 1px dashed var(--bshp-line);
}

.bshp-contact-actions { gap: 0.65rem; }

.bshp-contact-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.15rem;
	border-radius: 9999px;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.bshp-contact-btn:hover { transform: translateY(-1px); }

.bshp-contact-btn.is-solid {
	background: var(--bshp-fg);
	color: var(--bshp-bg);
}
.bshp-contact-btn.is-solid:hover {
	background: var(--bshp-accent);
	color: var(--bshp-invert-fg);
}

.bshp-contact-btn.is-linkedin {
	background: #0a66c2;
	color: #fff;
}
.bshp-contact-btn.is-linkedin:hover {
	background: #084e96;
}

/* Magnetic cursor ------------------------------------------------------- */
#bshp-cursor {
	width: 28px; height: 28px;
	border: 1px solid var(--bshp-fg);
	border-radius: 9999px;
	transform: translate(-50%,-50%);
	transition: width .25s ease, height .25s ease, background .25s ease, border-color .25s ease;
	mix-blend-mode: difference;
}
#bshp-cursor.is-hover {
	width: 68px; height: 68px;
	background: var(--bshp-fg);
	border-color: transparent;
}
#bshp-cursor-dot {
	width: 4px; height: 4px;
	background: var(--bshp-fg);
	border-radius: 9999px;
	transform: translate(-50%,-50%);
	mix-blend-mode: difference;
}
@media (hover: none) { #bshp-cursor, #bshp-cursor-dot { display: none !important; } }

/* Tool chips (About section) ------------------------------------------ */
.bshp-tool { padding: .65rem .35rem; }
.bshp-tool-icon {
	width: 52px; height: 52px; border-radius: 14px;
	background: var(--bshp-panel);
	border: 1px solid var(--bshp-line);
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: transform .3s ease, border-color .3s ease;
}
.bshp-tool-icon img { width: 28px; height: 28px; }
.bshp-tool span:last-child { font-size: 15px; }
.bshp-tool:hover .bshp-tool-icon { transform: translateY(-2px); border-color: var(--bshp-accent); }

/* Writing list --------------------------------------------------------- */
.bshp-writing-list { width: 100%; }

.bshp-writing-row {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 0.65rem 1.1rem;
	align-items: start;
	padding: 1.45rem 0.5rem;
	border-bottom: 1px solid var(--bshp-line);
	color: inherit;
	text-decoration: none;
	transition: background .25s ease;
}
@media (min-width: 900px) {
	.bshp-writing-row {
		grid-template-columns: 3.5rem 1fr 5.5rem;
		gap: 1.5rem;
		align-items: center;
		padding: 1.7rem 0.75rem;
	}
}
.bshp-writing-row:hover {
	background: color-mix(in oklab, var(--bshp-panel) 85%, transparent);
}
.bshp-writing-main { min-width: 0; }
.bshp-writing-title {
	display: block;
	font-family: 'PP Neue Montreal', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(1.35rem, 2.6vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--bshp-fg);
	transition: color .25s ease;
}
.bshp-writing-row:hover .bshp-writing-title { color: var(--bshp-accent); }
.bshp-writing-excerpt {
	margin: 0.45rem 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bshp-muted);
	max-width: 36rem;
}
.bshp-writing-date {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bshp-muted);
	justify-self: end;
}
@media (max-width: 899px) {
	.bshp-writing-date {
		grid-column: 2;
		justify-self: start;
		margin-top: -0.15rem;
	}
}

/* Post body ------------------------------------------------------------ */
.bshp-prose {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--bshp-fg);
}
.bshp-prose > *:first-child { margin-top: 0; }
.bshp-prose p,
.bshp-prose ul,
.bshp-prose ol,
.bshp-prose blockquote {
	margin: 0 0 1.25rem;
}
.bshp-prose a {
	color: var(--bshp-fg);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: var(--bshp-line);
}
.bshp-prose a:hover {
	color: var(--bshp-accent);
	text-decoration-color: var(--bshp-accent);
}
.bshp-prose h2,
.bshp-prose h3 {
	font-family: 'PP Neue Montreal', 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 2rem 0 0.85rem;
}
.bshp-prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.bshp-prose h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.bshp-prose ul,
.bshp-prose ol { padding-left: 1.25rem; }
.bshp-prose li + li { margin-top: 0.35rem; }
.bshp-prose blockquote {
	border-left: 2px solid var(--bshp-accent);
	padding-left: 1rem;
	color: var(--bshp-muted);
}
.bshp-prose img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1.5rem 0;
	border: 1px solid var(--bshp-line);
}

/* Content prose */
.prose :where(a) { color: var(--bshp-fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--bshp-line); }
.prose :where(a):hover { color: var(--bshp-accent); text-decoration-color: var(--bshp-accent); }

/* Spotify music player ------------------------------------------------- */
.bshp-music {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.65rem;
}
.bshp-music-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 0.9rem;
	border-radius: 9999px;
	border: 1px solid var(--bshp-line);
	background: color-mix(in oklab, var(--bshp-bg) 88%, transparent);
	backdrop-filter: blur(10px);
	color: var(--bshp-fg);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.bshp-music-toggle:hover,
.bshp-music.is-open .bshp-music-toggle {
	border-color: var(--bshp-accent);
	color: var(--bshp-accent);
}
.bshp-music-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	align-items: center;
	justify-content: center;
}
.bshp-music-panel {
	width: min(340px, calc(100vw - 2rem));
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--bshp-line);
	background: var(--bshp-panel);
	box-shadow: 0 18px 48px rgba(0,0,0,0.35);
}
.bshp-music-panel iframe {
	display: block;
	width: 100%;
	height: 152px;
	border: 0;
}
@media (max-width: 767px) {
	.bshp-music {
		right: 0.85rem;
		bottom: 0.85rem;
	}
	.bshp-music-label { display: none; }
	.bshp-music-toggle {
		padding: 0.7rem;
		border-radius: 9999px;
	}
	.bshp-music-panel iframe { height: 152px; }
}