/* Main page: dotted wallpaper on a warm cream wash (round 9: "put a color on main page" -
   was plain white). See docs/designbook/designbook_shell/02-portfolio.md for the design
   decision history. */
body {
	background-color: #fbf7ee;
	background-image: radial-gradient(circle, rgba(90, 86, 76, 0.16) 1px, transparent 1px);
	background-size: 26px 26px;
}

/* Header: the actual "Nano's Choice" concept art (round 10 - after several rounds trying
   to recreate its density/overlap by compositing individually-generated pieces, Brian:
   "just use concept art"). Image is the cropped illustrated band from the original 16:9
   concept render (img/bg/header-scene.jpg). "cover" + a low position keeps the busiest
   part of the illustration in frame across very wide/short header aspect ratios. */
#header {
	background-image: url('../img/bg/header-scene.jpg');
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
}

/* Saved papercut objects (fern fronds / koru spirals / kiwi silhouette from the concept-art
   session) as a faint ambient texture across the main board — not just the header. Brian:
   "put the saved objects at BG on main board but higher transparency." A single fixed,
   z-index:-1 layer behind all page content (cards/filter sit in normal flow above it), high
   transparency so it reads as a watermark, not a competing illustration. Hidden under 700px
   — mobile screen real estate goes to the card grid, not decoration. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.1;
	background-repeat: no-repeat;
	background-image:
		url('../img/bg/papercut/frond-cream-large.png'),
		url('../img/bg/papercut/koru-gold-accent.png'),
		url('../img/bg/papercut/frond-olive.png'),
		url('../img/bg/papercut/kiwi-silhouette.png'),
		url('../img/bg/papercut/koru-cream.png'),
		url('../img/bg/papercut/nikau-frond.png'),
		url('../img/bg/papercut/paua-shell.png'),
		url('../img/bg/papercut/koru-brown.png'),
		url('../img/bg/papercut/frond-brown.png');
	background-position:
		-30px -20px,
		78vw 4vh,
		calc(100% + 20px) 38vh,
		84vw 88vh,
		4vw 60vh,
		30vw 96vh,
		center center,
		60vw 70vh,
		15vw 22vh;
	background-size:
		280px auto,
		140px auto,
		240px auto,
		220px auto,
		160px auto,
		180px auto,
		190px auto,
		150px auto,
		200px auto;
}
@media (max-width: 700px) {
	body::before {
		display: none;
	}
}