/*
 * B.B. Design Studio homepage.
 *
 * The ribbon artwork (images/newwebportbg.png) is redrawn live by
 * script/ribbons.js. The page itself stays ink on paper; each portfolio
 * category borrows one ribbon band colour for its swatch and link highlight.
 */

:root {
	color-scheme: light;

	--paper: #fafaf9;
	--ink: #2a2233;
	--ink-soft: #544c5e;
	--rule: rgba(42, 34, 51, 0.2);

	--blue: #b9d7ee;
	--lavender: #cbbfe7;
	--pink: #f4bcda;
	--peach: #f6cfab;
	--green: #a8d7bf;
	--heart: #d6579a;
	--bb-yellow: #ffcc00;

	--display: 'Fahkwang', 'Anuphan', Georgia, serif;
	--text: 'Anuphan', 'Noto Sans Thai', 'Leelawadee UI', system-ui, sans-serif;
	--gutter: clamp(1rem, 4vw, 3.5rem);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background: var(--paper);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--paper);
	color: var(--ink);
	font: 400 1rem/1.55 var(--text);
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--bb-yellow);
	color: var(--ink);
}

/* ---- Background ---------------------------------------------------------
 * Live ribbons when JS + WebGL work; the original still image otherwise
 * (no JS, no WebGL, lost GPU context). */

#ribbons {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	pointer-events: none;
}

html:not(.js) #ribbons,
.no-ribbons #ribbons {
	display: none;
}

html:not(.js) body::before,
.no-ribbons body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	background: url(../images/newwebportbg.png) center top / cover no-repeat;
}

/* ---- Layout ------------------------------------------------------------ */

.page {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	max-width: 90rem;
	min-height: 100vh;
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
}

@media (max-width: 56rem) {
	.page {
		grid-template-columns: minmax(0, 1fr);
	}
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Masthead ---------------------------------------------------------- */

.brand {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	margin: 0;
	font: 600 1.375rem/41px var(--display);
	letter-spacing: 0.01em;
}

/* bb.png carries a reflection under its 61px square: size and align the
 * square alone with the name, and let the reflection hang below. */
.brand img {
	flex: none;
	width: 41px;
	height: auto;
	margin-bottom: -20px;
}

.motto {
	max-width: 17ch;
	margin: clamp(2.25rem, 9vh, 5rem) 0 1.25rem;
	font: 300 clamp(2.125rem, 1rem + 2.6vw, 3.5rem) / 1.08 var(--display);
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.lede {
	max-width: 32ch;
	margin: 0;
	color: var(--ink-soft);
	font-size: 1.0625rem;
}

/* ---- Contact / more ---------------------------------------------------- */

.rail {
	--band: var(--pink);
}

.block {
	margin-top: 2.25rem;
}

.block h2,
.archive-title,
.shelf h3 {
	margin: 0 0 0.5rem;
	font: 500 1.1875rem/1.2 var(--display);
}

.block li {
	padding: 0.15rem 0;
}

.more li {
	padding: 0.3rem 0;
}

.note {
	display: block;
	max-width: 40ch;
	color: var(--ink-soft);
	font-size: 0.875rem;
	line-height: 1.6;
}

/* ---- Portfolio --------------------------------------------------------- */

.archive-title {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
	padding-top: 0.35rem;
}

.count {
	color: var(--ink-soft);
	font: 400 0.8125rem/1 var(--text);
	font-variant-numeric: tabular-nums;
}

.shelves {
	columns: 2 17rem;
	column-gap: clamp(2rem, 4vw, 3.5rem);
}

.shelf {
	break-inside: avoid;
	margin-bottom: 2.25rem;
}

.shelf[data-band='blue'] { --band: var(--blue); }
.shelf[data-band='pink'] { --band: var(--pink); }
.shelf[data-band='peach'] { --band: var(--peach); }
.shelf[data-band='lavender'] { --band: var(--lavender); }
.shelf[data-band='green'] { --band: var(--green); }

.shelf h3 {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.65rem;
}

/* A slanted cut of the category's ribbon band. */
.shelf h3::before {
	content: '';
	flex: none;
	width: 1.75rem;
	height: 0.6rem;
	border-radius: 2px;
	background: var(--band);
	transform: skewX(-28deg);
}

.shelf h3 .count {
	margin-left: -0.2rem;
}

.shelf li {
	position: relative;
	padding: 0.2rem 0;
	line-height: 1.45;
}

/* Favourites are marked in the margin, so long titles wrap cleanly. */
.pick {
	position: absolute;
	top: 0.62em;
	left: -1.25rem;
	display: flex;
}

.pick svg {
	width: 0.8rem;
	height: 0.7rem;
	fill: var(--heart);
}

/* No margin: the space before it collapses when the host wraps to a new line. */
.host {
	color: var(--ink-soft);
	font-size: 0.8125rem;
	white-space: nowrap;
}

.empty {
	max-width: 36ch;
	color: var(--ink-soft);
}

/* ---- Links: a band of ribbon slides under the text --------------------- */

.page li > a {
	background: linear-gradient(var(--band), var(--band)) no-repeat 0 88% / 0 0.5em;
	transition: background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.page li > a:hover,
.page li > a:focus-visible {
	background-size: 100% 0.5em;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---- Animation toggle -------------------------------------------------- */

.motion-toggle {
	position: fixed;
	right: clamp(0.75rem, 2vw, 1.5rem);
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.85rem 0.45rem 0.7rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: rgba(250, 250, 249, 0.82);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--ink-soft);
	font: 500 0.8125rem/1 var(--text);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

.motion-toggle[hidden] {
	display: none;
}

.motion-toggle:hover {
	border-color: var(--ink-soft);
	color: var(--ink);
}

.motion-toggle svg {
	width: 0.75rem;
	height: 0.75rem;
	fill: currentColor;
}

.motion-toggle .icon-play,
.motion-toggle.is-paused .icon-pause {
	display: none;
}

.motion-toggle.is-paused .icon-play {
	display: block;
}

/* ---- Small screens ----------------------------------------------------- */

@media (max-width: 56rem) {
	.motto {
		margin-top: 2.5rem;
	}

	.archive {
		padding-top: 2rem;
		border-top: 1px solid var(--rule);
	}

	/* Room in the margin for the favourite marks. */
	.shelf ul {
		padding-left: 1.25rem;
	}
}

/* ---- Accessibility and print ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.page li > a,
	.motion-toggle {
		transition: none;
	}
}

/* Forced colours repaint text but not the canvas: drop the artwork. */
@media (forced-colors: active) {
	#ribbons,
	body::before {
		display: none !important;
	}

	.shelf h3::before {
		background: CanvasText;
	}
}

@media print {
	#ribbons,
	body::before,
	.motion-toggle {
		display: none !important;
	}

	.page {
		display: block;
	}
}