@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..700&family=Figtree:wght@300..800&display=swap');
/*
 * HUMANITAE WORKS — SAND AND LIGHT.
 *
 * ── WHY THIS IS A REBUILD RATHER THAN A REPAINT ─────────────────────────
 *
 * Hers, 7 September 2026, on the first version — built the same morning:
 * **you've just done a green version of the Nan Made It website**, and then
 * the sentence that named the actual fault: **even though the colours are
 * green and moss in the background, doesn't mean the website needs to be
 * heavy like that.**
 *
 * She was right and the measurement was worse than heavy:
 *
 *     the hero        1,229px of solid dark green — a screen and a half
 *     a second band   730px of the same
 *     the whole page  773 words, seven screens, one photograph
 *
 * **Two slabs of dark green with text on them.** And a dark ground, which her
 * own law forbids offering her.
 *
 * ── THE FAULT WAS GIVING IT A COLOUR INSTEAD OF A WORLD ─────────────────
 *
 * Green and moss went onto the background because that is the easiest place to
 * put a colour, and once the ground is dark every other decision spends itself
 * fighting it.
 *
 * ── AND THE ANSWER WAS SITTING IN HER OWN LOGO ──────────────────────────
 *
 * It is a sand sculpture. Her words when she gave it: **organic, unique and
 * breathtakingly beautiful — we're sculpting a new world.**
 *
 * **Sand is pale. It is warm. It is full of light.** And a sand sculpture is
 * the truest thing anybody has said about a workplace: made by hand, out of the
 * most ordinary material there is, astonishing that it holds together at all,
 * **and it collapses the moment nobody tends it.**
 *
 * So the ground is sand. Green stops being the room and becomes the living
 * thing growing in it — used at perhaps a tenth of the amount and landing ten
 * times harder.
 *
 * ── THE TYPE IS CARVED, WHICH IS THE PART NOBODY ELSE IS DOING ──────────
 *
 * Every heading is lit from above and shadowed below, in the ground's own
 * colour, so it reads as cut into the surface rather than printed on it. That
 * is the sculpture, made structural rather than illustrated — and it is why
 * this cannot be mistaken for any other business's landing page.
 */

:root {

	/*
	 * WHITE, AND BRIGHT. Hers, 7 September 2026: get rid of the cream, get rid
	 * of the beige, use white — a fresh bright future for humanity.
	 *
	 * **So the only sand left on this world is the sand her mark is made of.**
	 * It was a background wash before, which made a page about a bright future
	 * look like a page about a beach. The green is her own, read off the hedge
	 * behind her sculpture.
	 */
	--paper:       #FFFFFF;
	--paper-soft:  #F4F8F5;
	--edge:        #E4EDE7;

	--ink:         #16211B;
	--ink-soft:    #5C6B62;

	--green:       #1F6B43;
	--fresh:       #35C46B;
	--deep:        #0E3D26;

	/* used nowhere but the sculpture's own shadow */
	--sand:        #D8B98F;

	/* Older sections still ask for these by name. Kept, and pointed at the
	   bright palette, so nothing on the page falls back to nothing. */
	--sand-deep:   #F4F8F5;
	--sand-lit:    #FFFFFF;
	--sand-shade:  #E4EDE7;

	--head: 'Fraunces', Georgia, serif;
	--body: 'Figtree', system-ui, -apple-system, sans-serif;
}


* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	background: var(--paper);
	color: var(--ink);
	font: 400 18px/1.7 var(--body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/*
 * THE GRAIN. Two fine repeating gradients at very low opacity, so the ground
 * has the tooth of packed sand rather than the flatness of a screen. Fixed, so
 * the page moves over it rather than dragging it along.
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .55;
	background-image:
		repeating-linear-gradient(31deg, rgba(140,120,90,.055) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(-59deg, rgba(140,120,90,.045) 0 1px, transparent 1px 4px);
}

.hum-page { position: relative; z-index: 1; }

/* ── THE BAR ────────────────────────────────────────────────────────────
 *
 * Quiet, sand, and it does not announce itself. A rule beneath it rather than
 * a filled block, so the page begins with air rather than furniture.
 */
.hum-skip { position: absolute; left: -9999px; }
.hum-skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--sand-lit);
	padding: 12px 18px; border-radius: 3px; color: var(--ink); }

.hum-top {
	position: relative; z-index: 2;
	border-bottom: 1px solid rgba(190,172,140,.5);
	background: rgba(253,250,244,.55);
	backdrop-filter: blur(6px);
}
.hum-top .hum-wrap {
	max-width: 1180px; margin: 0 auto;
	padding: 16px clamp(20px, 6vw, 80px);
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.hum-top .hum-mark {
	display: flex; align-items: baseline; gap: 7px;
	text-decoration: none; color: var(--ink);
	width: auto; margin: 0;
}
.hum-top .hum-mark b { font: 700 15px/1 var(--body); letter-spacing: .2em; }
.hum-top .hum-mark i { font: 400 12px/1 var(--body); font-style: normal;
	letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.hum-cta {
	font: 700 11.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase;
	color: var(--green); text-decoration: none;
	padding: 11px 2px 9px;
	border-top: 1px solid rgba(46,74,43,.35);
	border-bottom: 1px solid rgba(46,74,43,.35);
	transition: letter-spacing .4s ease;
	white-space: nowrap;
}
.hum-cta:hover, .hum-cta:focus-visible { letter-spacing: .24em; }

/* ── CARVED ─────────────────────────────────────────────────────────────
 *
 * Light falls from above and to the left, the way it does on a sculpture out
 * in the open. The highlight is the ground made lighter, the shadow is the
 * ground made darker — never grey, never black, so it reads as the same
 * material rather than as a drop shadow.
 */
.carved {
	color: var(--ink);
	text-shadow:
		-1px -1px 0 var(--sand-lit),
		 1px  1px 0 var(--sand-shade),
		 2px  3px 6px rgba(120, 104, 78, .28);
}

.carved--deep {
	color: transparent;
	background: linear-gradient(178deg, #3A4634 0%, #232C20 62%);
	-webkit-background-clip: text;
	background-clip: text;
	text-shadow: none;
	filter: drop-shadow(-1px -1px 0 rgba(255,252,246,.85))
	        drop-shadow(1px 2px 0 rgba(190,172,140,.55))
	        drop-shadow(2px 5px 10px rgba(120,104,78,.3));
}

h1, h2, h3 { font-family: var(--head); font-weight: 600; letter-spacing: -.028em; text-wrap: balance; }

/* ── THE OPENING ────────────────────────────────────────────────────────
 *
 * No slab. The logo, one moment somebody recognises, and air. Her law that a
 * page opens by putting the reader inside something rather than making a
 * claim about the business.
 */
.hum-open {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: clamp(28px, 7vw, 90px) clamp(20px, 6vw, 80px) clamp(120px, 22vh, 260px);
	max-width: 1180px;
	margin: 0 auto;
	overflow: hidden;
}

/*
 * THE HEAP. It sits along the bottom of the opening and builds while she reads,
 * so the page is being made out of ordinary material in front of her rather
 * than illustrating that it was.
 */
/* The dune's canvas rule lived here, absolutely positioned and masked to fade
   into the page. The sculpture is the subject now rather than a backdrop, so it
   sits in the flow and its only rule is further down this file. Left as one
   declaration, not two — a class declared twice is how a fix changes nothing. */

.hum-open__say { position: relative; z-index: 1; }

.hum-logo { width: clamp(84px, 14vw, 132px); height: auto; margin-bottom: clamp(24px, 4.5vw, 44px); }

.hum-lead {
	font-size: clamp(16px, 2.3vw, 20px);
	color: var(--ink-soft);
	max-width: 34ch;
	margin-bottom: clamp(18px, 3vw, 28px);
}

.hum-h1 {
	font: 600 clamp(30px, 6.6vw, 68px)/1.1 var(--head);
	letter-spacing: -.035em;
	max-width: 16ch;
}
.hum-h1 em { font-style: normal; color: var(--green); }

.hum-ask {
	margin-top: clamp(26px, 4.4vw, 46px);
	font: 400 clamp(22px, 4.4vw, 40px)/1.2 var(--head);
	letter-spacing: -.028em;
	color: var(--gold);
}

/* ── THE RECOGNITIONS ───────────────────────────────────────────────────
 *
 * A run of moments the reader has stood in. Each one alone on its line, with
 * enough space that it lands before the next arrives.
 */
.hum-knows { padding: clamp(50px, 9vw, 120px) clamp(20px, 6vw, 80px); max-width: 1180px; margin: 0 auto; }

.hum-knows ol { list-style: none; display: grid; gap: clamp(22px, 4vw, 44px); counter-reset: k; }

.hum-knows li {
	counter-increment: k;
	position: relative;
	padding-left: clamp(38px, 6vw, 62px);
	font: 400 clamp(20px, 3.4vw, 30px)/1.34 var(--head);
	letter-spacing: -.02em;
	max-width: 26ch;
}

.hum-knows li::before {
	content: counter(k, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: .34em;
	font: 700 12px/1 var(--body);
	letter-spacing: .1em;
	color: var(--gold);
}

.hum-knows li:nth-child(even) { margin-left: auto; text-align: left; }

.hum-knows .then {
	margin-top: clamp(44px, 7vw, 80px);
	font: 400 clamp(21px, 3.6vw, 32px)/1.34 var(--head);
	color: var(--green);
	max-width: 22ch;
	letter-spacing: -.022em;
}

/* ── A BAND, AND IT IS STILL SAND ───────────────────────────────────────*/

.hum-band { padding: clamp(56px, 10vw, 130px) clamp(20px, 6vw, 80px); }
.hum-band > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.hum-band--deep { background: var(--sand-deep); }

.hum-eyebrow {
	font: 700 12.5px/1.5 var(--body);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 14px;
}

.hum-band h2 { font-size: clamp(29px, 5.6vw, 54px); line-height: 1.1; max-width: 20ch; }
.hum-band p { margin-top: 18px; max-width: 60ch; font-size: clamp(17px, 2.3vw, 20px); }
.hum-band p + p { margin-top: 14px; }
.hum-band strong { font-weight: 700; }

/* ── THE NAME, AS AN ARGUMENT ───────────────────────────────────────────*/

.hum-word { margin-top: clamp(34px, 6vw, 60px); display: grid; gap: 18px; max-width: 46ch; }

.hum-word div { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: baseline; }
.hum-word b {
	font: 600 clamp(19px, 3vw, 26px)/1.2 var(--head);
	color: var(--green);
	letter-spacing: -.01em;
	white-space: nowrap;
}
.hum-word i { font-style: normal; font-size: 16.5px; color: var(--ink-soft); line-height: 1.55; }

/* ── THE THREE, AS THICKNESSES OF ONE STRUCTURE ─────────────────────────*/

.hum-three { display: grid; gap: 14px; margin-top: clamp(32px, 5vw, 52px); }
@media (min-width: 920px) { .hum-three { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.hum-one {
	background: var(--sand-lit);
	padding: clamp(24px, 3.4vw, 38px);
	border-radius: 3px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.9),
		0 1px 0 rgba(190,172,140,.6),
		0 22px 40px -30px rgba(120,104,78,.55);
	display: flex;
	flex-direction: column;
}

.hum-one .lat { font: 600 11.5px/1.4 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.hum-one h3 { margin-top: 10px; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.12; }
.hum-one .says { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.hum-one dl { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(190,172,140,.55); display: grid; gap: 11px; }
.hum-one dt { font: 700 11px/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.hum-one dd { font-size: 16px; line-height: 1.55; }
.hum-one .keeps { margin-top: auto; padding-top: 18px; font-size: 16px; line-height: 1.55; color: var(--green); font-weight: 600; }

/* ── THE FIFTH QUESTION ─────────────────────────────────────────────────
 *
 * The one green ground on the whole page, and it is earned: it is the only
 * place the page stops selling and asks the reader something.
 */
.hum-fifth {
	background: var(--green);
	color: var(--sand);
	padding: clamp(60px, 11vw, 150px) clamp(20px, 6vw, 80px);
}
.hum-fifth > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.hum-fifth .hum-eyebrow { color: var(--fresh); }
.hum-fifth ol { list-style: none; margin-top: clamp(26px, 4vw, 44px); display: grid; gap: 15px; }
.hum-fifth li {
	font: 400 clamp(19px, 3.2vw, 30px)/1.36 var(--head);
	letter-spacing: -.02em;
	opacity: .58;
	max-width: 28ch;
}
.hum-fifth li:last-child {
	opacity: 1;
	color: #fff;
	margin-top: clamp(14px, 2.4vw, 26px);
	font-size: clamp(24px, 4.6vw, 44px);
}
.hum-fifth .quiet { margin-top: clamp(30px, 5vw, 52px); max-width: 46ch; font-size: clamp(17px, 2.3vw, 20px); opacity: .9; }

/* ── THE WAY IN ─────────────────────────────────────────────────────────*/

.hum-in { padding: clamp(56px, 10vw, 130px) clamp(20px, 6vw, 80px) clamp(70px, 12vw, 150px); text-align: center; }
.hum-in > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.hum-in h2 { font-size: clamp(28px, 5.4vw, 50px); line-height: 1.12; }
.hum-in p { margin-top: 18px; font-size: clamp(17px, 2.3vw, 20px); color: var(--ink-soft); }

.hum-go {
	display: inline-block;
	margin-top: clamp(28px, 4vw, 42px);
	padding: 17px 4px 14px;
	font: 700 14px/1 var(--body);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--green);
	text-decoration: none;
	border-top: 1px solid rgba(46,74,43,.4);
	border-bottom: 1px solid rgba(46,74,43,.4);
	transition: letter-spacing .45s ease, border-color .45s ease;
}
.hum-go:hover, .hum-go:focus-visible { letter-spacing: .3em; border-color: var(--green); }

.hum-foot {
	padding: 0 clamp(20px, 6vw, 80px) clamp(40px, 6vw, 70px);
	text-align: center;
	font-size: 14px;
	color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hum-go { transition: none; }
}


/* ══ THE MARK BUILDS ITSELF ═══════════════════════════════════════════ */

.hum-open {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 5vw, 4.5rem);
	align-items: center;
	padding: clamp(2rem, 6vw, 5.5rem) 0 clamp(2rem, 5vw, 4rem);
}
@media (max-width: 860px) {
	.hum-open { grid-template-columns: 1fr; }
	.hum-open__mark { order: -1; }
}

.hum-open__mark { position: relative; }
.hum-pour {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: 78vh;
	/* the sand it is made of, thrown gently under it */
	filter: drop-shadow( 0 18px 34px rgba( 216, 185, 143, .38 ) );
}

.hum-lead {
	font-family: var(--body);
	font-size: clamp(.95rem, 1.5vw, 1.1rem);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--green);
	margin: 0 0 1rem;
}
.hum-h1 {
	font-family: var(--head);
	font-variation-settings: 'opsz' 120, 'SOFT' 40, 'WONK' 1;
	font-weight: 500;
	font-size: clamp(2.1rem, 5.4vw, 4.1rem);
	line-height: 1.02;
	letter-spacing: -.03em;
	color: var(--ink);
	margin: 0 0 1.4rem;
}
.hum-h1 em { font-style: italic; color: var(--green); }
.hum-ask {
	font-family: var(--head);
	font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	font-style: italic;
	color: var(--ink-soft);
	margin: 0;
}

/* ══ MAGIC FIRST ══════════════════════════════════════════════════════ */

.hum-possible, .hum-machinery, .hum-needs {
	padding: clamp(3rem, 8vw, 6.5rem) 0;
	border-top: 1px solid var(--edge);
}
.hum-eyebrow {
	font-family: var(--body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fresh);
	margin: 0 0 1.1rem;
}
.hum-h2 {
	font-family: var(--head);
	font-variation-settings: 'opsz' 90, 'SOFT' 30;
	font-weight: 500;
	font-size: clamp(1.7rem, 3.9vw, 3rem);
	line-height: 1.06;
	letter-spacing: -.025em;
	color: var(--ink);
	margin: 0 0 1.6rem;
	max-width: 22ch;
}
.hum-big {
	font-size: clamp(1.05rem, 1.9vw, 1.4rem);
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 58ch;
	margin: 0 0 1.1rem;
}
.hum-big strong { color: var(--ink); font-weight: 600; }

.hum-two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.2rem, 3vw, 2.6rem);
	margin: 2.2rem 0;
}
.hum-two article {
	background: var(--paper-soft);
	border: 1px solid var(--edge);
	border-radius: 1.1rem;
	padding: clamp(1.3rem, 2.6vw, 2rem);
}
.hum-two h3 {
	font-family: var(--head);
	font-weight: 600;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	line-height: 1.15;
	color: var(--deep);
	margin: 0 0 .8rem;
}
.hum-two p { font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.hum-two strong { color: var(--ink); }

.hum-then { font-size: 1.05rem; color: var(--ink-soft); max-width: 60ch; margin: 0 0 .8rem; }
.hum-punch {
	font-family: var(--head);
	font-weight: 600;
	font-size: clamp(1.3rem, 2.8vw, 2.05rem);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--ink);
	max-width: 26ch;
	margin: 0;
}

.hum-needs__list { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: .75rem; max-width: 60ch; }
.hum-needs__list li {
	position: relative;
	padding-left: 1.9rem;
	font-size: clamp(1rem, 1.7vw, 1.2rem);
	line-height: 1.5;
	color: var(--ink-soft);
}
.hum-needs__list li::before {
	content: '';
	position: absolute;
	left: 0; top: .62em;
	width: .7rem; height: .7rem;
	border-radius: 50%;
	background: var(--fresh);
}

@media (prefers-reduced-motion: reduce) { .hum-pour { filter: none; } }

.hum-then--after { margin-top: 1.6rem; max-width: 62ch; font-size: clamp(1.02rem, 1.7vw, 1.22rem); line-height: 1.55; }
.hum-then strong { color: var(--ink); font-weight: 700; }