/* Porch Labs sample redesign. Plain CSS, no build step. */

@font-face {
	font-family: "Newsreader";
	src: url("fonts/newsreader-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Newsreader";
	src: url("fonts/newsreader-latin-wght-italic.woff2") format("woff2");
	font-weight: 200 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Sans 3";
	src: url("fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

/* Fallbacks shaped like the web fonts (same average width at the weights the site
   uses, same line metrics; measured with fontTools), so nothing reflows or moves
   when the web fonts arrive. */
@font-face {
	font-family: "Source Sans 3 Fallback";
	src: local("Arial"), local("ArialMT");
	font-weight: 200 500;
	size-adjust: 94.25%;
	ascent-override: 108.65%;
	descent-override: 42.44%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Source Sans 3 Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 501 900;
	size-adjust: 89.86%;
	ascent-override: 113.96%;
	descent-override: 44.51%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Newsreader Fallback";
	src: local("Georgia");
	font-weight: 200 500;
	size-adjust: 96.26%;
	ascent-override: 76.36%;
	descent-override: 27.53%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Newsreader Fallback";
	src: local("Georgia Bold"), local("Georgia-Bold");
	font-weight: 501 900;
	size-adjust: 86.21%;
	ascent-override: 85.26%;
	descent-override: 30.74%;
	line-gap-override: 0%;
}

/* Colours: limestone paper, walnut ink, spruce green for actions, cedar for small
   accents. Evening is the porch at night: blue-black, with lantern amber.
   The theme follows the device unless someone picks one (theme.js sets
   data-theme="day" or "night" on <html>). */
:root {
	color-scheme: light;
	--paper: #f4f1ea;
	--paper-2: #ebe6db;
	--paper-3: #e0d9ca;
	--ink: #1d1a16;
	--ink-2: #46403a;
	--ink-3: #6a6359;
	--rule: #d4cdbe;
	--accent: #2d4a3b;
	--accent-hover: #233c30;
	--accent-ink: #f6f3ec;
	--cedar: #8c5426;
	--honey: #b88a3c;
	--focus: #2d4a3b;
	--error: #a3341f;
	--shadow: 32 24 14;

	--serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
	--sans: "Source Sans 3", "Source Sans 3 Fallback", Arial, sans-serif;

	--gutter: clamp(1rem, 4vw, 2.5rem);
	--wide: 74rem;
	--measure: 40rem;
}

/* evening: chosen, or the device is in dark mode and nothing was chosen */
:root[data-theme="night"] {
	color-scheme: dark;
	--paper: #12151a;
	--paper-2: #191d23;
	--paper-3: #22272e;
	--ink: #ede7db;
	--ink-2: #c2baac;
	--ink-3: #9c9487;
	--rule: #333942;
	--accent: #e7ad62;
	--accent-hover: #f0bd78;
	--accent-ink: #1a130a;
	--cedar: #d9a06a;
	--honey: #e7ad62;
	--focus: #f0bd78;
		--error: #f2917a;
	--shadow: 0 0 0;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) {
		color-scheme: dark;
		--paper: #12151a;
		--paper-2: #191d23;
		--paper-3: #22272e;
		--ink: #ede7db;
		--ink-2: #c2baac;
		--ink-3: #9c9487;
		--rule: #333942;
		--accent: #e7ad62;
		--accent-hover: #f0bd78;
		--accent-ink: #1a130a;
		--cedar: #d9a06a;
		--honey: #e7ad62;
		--focus: #f0bd78;
		--error: #f2917a;
		--shadow: 0 0 0;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	touch-action: manipulation;
	scroll-padding-top: 1rem;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1.125rem;
	line-height: 1.6;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.14em; }

:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
	border-radius: 3px;
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 580;
	line-height: 1.12;
	letter-spacing: -0.012em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 1.4rem + 4.2vw, 4.4rem); font-weight: 580; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 560; letter-spacing: -0.005em; }
h4 { font-size: 1.1rem; font-weight: 600; }

p, ul, ol, dl { margin: 0 0 1em; }
p { text-wrap: pretty; }
strong { font-weight: 650; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem; top: -4rem;
	z-index: 10;
	background: var(--ink);
	color: var(--paper);
	padding: 0.6rem 1rem;
	border-radius: 4px;
	font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.wrap {
	width: 100%;
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Header ----------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.4rem;
	padding-block: 1rem;
}
.site-nav { margin-left: auto; }
.wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--ink);
	text-decoration: none;
	min-height: 44px;
}
.wordmark .mark { width: 2rem; height: 2rem; color: var(--ink); flex: none; }
.mark-flame { color: var(--honey); }
.mark-glow { color: var(--honey); opacity: 0; }
:root[data-theme="night"] .mark-glow { opacity: 0.22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .mark-glow { opacity: 0.22; } }
.wm { font-family: var(--serif); font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.wm-porch { font-weight: 600; }
.wm-labs { font-weight: 380; font-style: italic; color: var(--cedar); }

.theme-toggle {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 4.4rem;
	height: 2.4rem;
	padding: 0 0.55rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: var(--paper-2);
	color: var(--ink-3);
	cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink-3); }
html:not(.js) .theme-toggle { display: none; }
.theme-toggle svg { position: relative; z-index: 1; width: 1.05rem; height: 1.05rem; transition: color 0.25s; }
.theme-toggle .tt-sun { color: #b8741a; }
.tt-knob {
	position: absolute; top: 3px; left: 3px;
	width: calc(50% - 3px); height: calc(100% - 6px);
	border-radius: 999px;
	background: var(--paper);
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.22);
	transition: transform 0.25s ease;
}
:root[data-theme="night"] .tt-knob { transform: translateX(100%); background: var(--paper-3); }
:root[data-theme="night"] .theme-toggle .tt-sun { color: var(--ink-3); }
:root[data-theme="night"] .theme-toggle .tt-moon { color: var(--honey); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) .tt-knob { transform: translateX(100%); background: var(--paper-3); }
	:root:not([data-theme="day"]) .theme-toggle .tt-sun { color: var(--ink-3); }
	:root:not([data-theme="day"]) .theme-toggle .tt-moon { color: var(--honey); }
}

.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.4rem;
}
.site-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ink-2);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 500;
}
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-nav a[aria-current="page"] {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}
.site-nav .nav-cta a {
	color: var(--accent-ink);
	background: var(--accent);
	padding: 0 0.95rem;
	border-radius: 4px;
	font-weight: 600;
}
.site-nav .nav-cta a:hover { color: var(--accent-ink); background: var(--accent-hover); }
.site-nav .nav-cta a[aria-current="page"] { text-decoration: none; }

@media (max-width: 52rem) {
	.site-header .wrap { padding-block: 0.6rem 0.4rem; }
	.theme-toggle { order: 2; }
	.site-nav { width: 100%; order: 3; }
	/* one row that never wraps, so the menu can't rearrange itself when the web
	   font arrives */
	.site-nav ul { gap: 0 clamp(0.7rem, 3.2vw, 1.1rem); flex-wrap: nowrap; }
	.site-nav a { white-space: nowrap; }
	.site-nav .nav-cta { margin-left: auto; }
}

/* Phones with JavaScript: wordmark, Menu and the day/evening switch on one row;
   Menu opens the links as a list under it. Without JavaScript the two-row
   menu above stays. html.js is set in <head>, so nothing shifts on load. */
.menu-toggle { display: none; }
@media (max-width: 52rem) {
	html.js .site-header .wrap { gap: 0 0.6rem; padding-block: 0.5rem; }
	html.js .menu-toggle {
		order: 2;
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		min-height: 44px;
		padding: 0 0.8rem;
		border: 1px solid var(--rule);
		border-radius: 4px;
		background: none;
		color: var(--ink);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}
	html.js .menu-toggle svg { width: 1.2rem; height: 1.2rem; }
	html.js .menu-toggle .mt-x,
	html.js .site-header.open .menu-toggle .mt-bars { display: none; }
	html.js .site-header.open .menu-toggle .mt-x { display: inline; }
	html.js .theme-toggle { order: 3; }
	html.js .site-nav { order: 4; display: none; }
	html.js .site-header.open .site-nav { display: block; }
	html.js .site-nav ul { flex-direction: column; padding-block: 0.4rem 0.9rem; }
	html.js .site-nav a { width: 100%; min-height: 48px; font-size: 1.1rem; }
	html.js .site-nav .nav-cta { margin: 0.5rem 0 0; }
	html.js .site-nav .nav-cta a { justify-content: center; }
}

/* Buttons -------------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0.65rem 1.3rem;
	border-radius: 4px;
	border: 2px solid var(--accent);
	background: var(--accent);
	color: var(--accent-ink);
	font: 600 1.05rem/1.2 var(--sans);
	text-decoration: none;
	cursor: pointer;
}
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button.quiet {
	background: transparent;
	color: var(--ink);
	border-color: var(--rule);
}
.button.quiet:hover { border-color: var(--ink-3); filter: none; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Type helpers ------------------------------------------------------------------- */

.eyebrow {
	font-family: var(--sans);
	font-size: min(0.85rem, 3.3vw);
	white-space: nowrap; /* one line, so the fallback font's wider caps can't change the layout */
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cedar);
	margin: 0 0 1rem;
}
.lede {
	font-size: clamp(1.18rem, 1.05rem + 0.45vw, 1.38rem);
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 38rem;
}
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose li { margin-bottom: 0.4em; }
.small { font-size: 0.95rem; color: var(--ink-3); }
.more { font-weight: 600; }
.more::after { content: " \2192"; content: " \2192" / ""; } /* decorative: screen readers skip the arrow */

/* Sections ----------------------------------------------------------------------- */

.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section + .section { border-top: 1px solid var(--rule); }
.section.tint { background: var(--paper-2); border-top: 0; }
.section.tint + .section { border-top: 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { color: var(--ink-2); font-size: 1.15rem; }

/* Hero ------------------------------------------------------------------------- */

/* Desktop: the porch painting sits on the right and fades into the page on its
   left, under the words. Phones: words first, then the painting. */
.hero {
	position: relative;
	overflow: hidden;
	min-height: calc(min(60vw, 56rem) * 2 / 3);
	display: flex;
	/* top-aligned: a line rewrapping never moves the whole block */
	align-items: flex-start;
}
.hero-copy {
	position: relative;
	z-index: 2;
	padding-block: clamp(1.6rem, 2.4vw, 2.4rem) 2rem;
}
.hero-copy > * { max-width: 34rem; }
/* the text column spans the hero; let taps through to the painting beside the words */
.hero-copy { pointer-events: none; }
.hero-copy > * { pointer-events: auto; }
.hero h1 { text-wrap: wrap; max-width: 15ch; font-size: clamp(2.35rem, 1.2rem + 3.2vw, 3.7rem); }
.hero .lede { margin-bottom: 1.8rem; }
.hero .where { margin: 1.3rem 0 0; font-size: 0.98rem; color: var(--ink-3); }

.hero-art {
	position: absolute;
	top: 0;
	/* the right edge of the text column, not of the window */
	right: max(0px, calc((100% - var(--wide)) / 2 + var(--gutter)));
	width: min(60vw, 56rem);
	aspect-ratio: 3 / 2;
	-webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 38%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent 2%, #000 38%, #000 94%, transparent);
}
.hero-art::after {
	/* fade the painting's foot into the page */
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 12%;
	background: linear-gradient(transparent, var(--paper));
	pointer-events: none;
}
.hero-still img,
.porch-plate img { display: block; width: 100%; height: 100%; }
/* the hero picture: both times of day are in the page, CSS shows one */
.hero-still .still-night { display: none; }
:root[data-theme="night"] .hero-still .still-night { display: block; }
:root[data-theme="night"] .hero-still .still-day { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) .hero-still .still-night { display: block; }
	:root:not([data-theme="day"]) .hero-still .still-day { display: none; }
}


/* The live scene: the plate (chair removed), the chair's shadow and the chair,
   stacked exactly over the still. Shown only once every piece has loaded. */
.porch-plate, .porch-sky, .porch-chair, .chair-hit, .hero-art .rock { display: none; }
.hero-art.live .hero-still { visibility: hidden; }
.hero-art.live .porch-plate { display: block; position: absolute; inset: 0; }
.hero-art.live .porch-sky,
.hero-art.live .porch-chair { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-art.live .chair-hit {
	display: block;
	position: absolute;
	pointer-events: auto;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}
.hero-art.live .rock { display: inline-flex; }

@media (max-width: 52rem) {
	/* phones: the porch right under the header, fading out into the headline,
	   like the paintings on the other pages */
	.hero { display: block; min-height: 0; padding-top: 58vw; }
	.hero-copy { padding-block: 0 2rem; }
	.hero-art {
		top: 0;
		bottom: auto;
		width: 100%;
		-webkit-mask-image: linear-gradient(180deg, #000 64%, transparent 97%);
		mask-image: linear-gradient(180deg, #000 64%, transparent 97%);
	}
	.hero-art::after { display: none; }
}

/* Page heads on inner pages */
.page-head { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { max-width: 20ch; font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.8rem); }

.hero-art .rock {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 3;
	font: 600 0.92rem/1.2 var(--sans);
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 4px;
	padding: 0.55rem 0.8rem;
	min-height: 44px;
	cursor: pointer;
}
/* Shown only when focused from the keyboard; mouse and touch rock the chair itself. */
.hero-art .rock:not(:focus-visible) {
	clip-path: inset(50%);
	width: 1px; height: 1px;
	padding: 0; border: 0; min-height: 0;
	overflow: hidden;
	white-space: nowrap;
}

/* Problems we recognise ------------------------------------------------------------- */

.recognise {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: 0 2.5rem;
	border-top: 1px solid var(--rule);
}
.recognise li {
	padding: 1.6rem 1.6rem 1.6rem 0;
	border-bottom: 1px solid var(--rule);
}
.recognise h3 {
	font-size: 1.3rem;
	font-weight: 500;
	font-style: italic;
	margin-bottom: 0.5rem;
}
.recognise p { color: var(--ink-2); margin: 0; }
.recognise p + p { margin-top: 0.7rem; }
.after-list { max-width: 44rem; margin-top: 2.2rem; font-size: 1.15rem; }

/* What changed (the AI argument) ----------------------------------------------------- */

.argument {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
@media (max-width: 56rem) { .argument { grid-template-columns: 1fr; } }

/* Prepare / decide diagram */
.handoff {
	margin: 0;
	border: 1px solid var(--rule);
	border-radius: 6px;
	background: var(--paper);
	overflow: hidden;
}
.handoff figcaption {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--rule);
	font-size: 0.98rem;
	color: var(--ink-2);
}
.handoff figcaption strong { color: var(--ink); display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 560; }
.handoff-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.handoff-col { padding: 1.1rem 1.25rem 1.3rem; }
.handoff-col + .handoff-col { border-left: 1px solid var(--rule); background: var(--paper-2); }
.handoff-col h3 {
	font-family: var(--sans);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cedar);
	margin-bottom: 0.8rem;
}
.handoff-col ol { margin: 0; padding-left: 1.2rem; font-size: 1rem; }
.handoff-col li { margin-bottom: 0.5rem; }
.handoff-col li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.handoff-note {
	margin: 0;
	padding: 0.85rem 1.25rem;
	border-top: 1px solid var(--rule);
	font-size: 0.95rem;
	color: var(--ink-2);
}
@media (max-width: 34rem) {
	.handoff-cols { grid-template-columns: 1fr; }
	.handoff-col + .handoff-col { border-left: 0; border-top: 1px solid var(--rule); }
}

/* Example pairs */
.examples {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
	display: grid;
	gap: 1.4rem;
}
.examples li { padding-left: 1.1rem; border-left: 3px solid var(--honey); }
.examples h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.examples p { margin: 0; color: var(--ink-2); }

/* Services list -------------------------------------------------------------- */

.offer-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.offer-list > li {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
	gap: 0.5rem 3rem;
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--rule);
}
.offer-list h3 { margin: 0; }
.offer-list h3 a { color: var(--ink); text-decoration: none; }
.offer-list h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.offer-list p { margin: 0; color: var(--ink-2); }
@media (max-width: 44rem) { .offer-list > li { grid-template-columns: 1fr; } }

/* Principles ---------------------------------------------------------------- */

.principles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 2.2rem 3rem;
	margin: 0;
}
.principles div { border-top: 2px solid var(--ink); padding-top: 1rem; }
.principles dt { font-family: var(--serif); font-size: 1.3rem; font-weight: 540; line-height: 1.25; margin-bottom: 0.5rem; }
.principles dd { margin: 0; color: var(--ink-2); }

/* Landscape band ------------------------------------------------------------- */

.band {
	max-width: var(--wide);
	margin: 0 auto;
	padding: clamp(1rem, 3vw, 2rem) var(--gutter) 0;
}
.band img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: 50% 75%;
	border-radius: 4px;
}
.band figcaption {
	padding-top: 0.6rem;
	font-size: 0.85rem;
	color: var(--ink-3);
}
@media (max-width: 40rem) { .band img { aspect-ratio: 3 / 2; } }

.people, .split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
@media (max-width: 52rem) { .people, .split { grid-template-columns: 1fr; } }

/* Callout / invitation --------------------------------------------------------------- */

.invite {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) auto;
	gap: 1.5rem 3rem;
	align-items: center;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: 1px solid var(--rule);
	border-left: 6px solid var(--cedar);
	border-radius: 6px;
	background: var(--paper);
}
.invite h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 0.4rem; }
.invite p { margin: 0; color: var(--ink-2); max-width: 40rem; }
@media (max-width: 44rem) { .invite { grid-template-columns: 1fr; } }

.closing { text-align: left; }
.closing h2 { max-width: 18ch; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); }
.closing p { max-width: 40rem; font-size: 1.2rem; color: var(--ink-2); }

/* Inner page layouts ------------------------------------------------------------------- */

.with-toc {
	display: grid;
	grid-template-columns: 14rem minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.toc {
	position: sticky;
	top: 1.5rem;
	font-size: 0.98rem;
}
.toc h2 { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 0.6rem; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc a { display: block; padding: 0.35rem 0 0.35rem 1rem; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 56rem) {
	.with-toc { grid-template-columns: 1fr; }
	.toc { position: static; }
	.toc ul { display: flex; flex-wrap: wrap; gap: 0 1.2rem; border-left: 0; }
	.toc a { padding: 0.5rem 0; min-height: 44px; display: inline-flex; align-items: center; }
}

.service { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
.service + .service { border-top: 1px solid var(--rule); padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.service > h2 { margin-top: 0; }
.service .summary { font-size: 1.2rem; color: var(--ink-2); max-width: var(--measure); }

.fit {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1.2rem 2.4rem;
	margin: 1.6rem 0;
	max-width: 52rem;
}
.fit h3 { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cedar); margin-bottom: 0.6rem; }
.fit ul { padding-left: 1.1rem; margin: 0; color: var(--ink-2); font-size: 1.02rem; }
.fit li { margin-bottom: 0.35rem; }

/* Illustrative examples */
.story {
	margin: 1.8rem 0 0;
	max-width: 52rem;
	padding: 1.4rem 1.5rem 1.2rem;
	background: var(--paper-2);
	border-radius: 6px;
	border: 1px solid var(--rule);
}
.story .tag {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	border: 1px solid var(--rule);
	border-radius: 3px;
	padding: 0.1rem 0.45rem;
	margin-bottom: 0.7rem;
	background: var(--paper);
}
.story h3 { margin-bottom: 0.5rem; }
.story p { color: var(--ink-2); font-size: 1.04rem; }
.story p:last-child { margin-bottom: 0; }

/* Tables (costs, care) ------------------------------------------------------------- */

.table-wrap { max-width: 56rem; margin: 1.5rem 0 2rem; }
table { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
caption { text-align: left; font-family: var(--serif); font-size: 1.2rem; font-weight: 560; padding-bottom: 0.7rem; }
th, td { text-align: left; vertical-align: top; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--rule); }
thead th { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; border-bottom: 2px solid var(--ink); }
tbody th { font-weight: 650; width: 28%; }
td { color: var(--ink-2); }
@media (max-width: 40rem) {
	table, thead, tbody, tr, th, td { display: block; width: auto; }
	thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	tr { border-bottom: 1px solid var(--rule); padding: 0.8rem 0; }
	th, td { border: 0; padding: 0.2rem 0; }
	tbody th { width: auto; }
	td[data-label]::before { content: attr(data-label) ": "; font-weight: 650; color: var(--ink); }
}

.two-col {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: 1.5rem 2.5rem;
	max-width: 56rem;
	margin: 1.5rem 0 2rem;
}
.two-col > div { border-top: 2px solid var(--ink); padding-top: 0.9rem; }
.two-col h3 { font-size: 1.2rem; }
.two-col ul { padding-left: 1.1rem; margin: 0; color: var(--ink-2); }
.two-col li { margin-bottom: 0.4rem; }

/* Steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0 2rem; max-width: 46rem; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.6rem 3.4rem; }
.steps li::before {
	content: counter(step);
	position: absolute; left: 0; top: -0.1rem;
	width: 2.2rem; height: 2.2rem;
	display: grid; place-items: center;
	border: 1px solid var(--ink-3);
	border-radius: 50%;
	font: 560 1.05rem/1 var(--serif);
	color: var(--ink);
}
.steps li:not(:last-child)::after {
	content: ""; position: absolute; left: 1.1rem; top: 2.4rem; bottom: 0.3rem;
	border-left: 1px solid var(--rule);
}
.steps h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.steps p { margin: 0; color: var(--ink-2); }

/* FAQ */
.faq { max-width: 46rem; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1.05rem 2.5rem 1.05rem 0;
	position: relative;
	font-family: var(--serif);
	font-size: 1.18rem;
	font-weight: 540;
	line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	position: absolute; right: 0.3rem; top: 0.9rem;
	font: 400 1.5rem/1 var(--sans);
	color: var(--ink-3);
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 0 1.2rem; color: var(--ink-2); }
.faq .answer p:last-child { margin-bottom: 0; }

/* Note boxes */
.note {
	max-width: 46rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--honey);
	background: var(--paper-2);
	border-radius: 0 6px 6px 0;
	margin: 1.5rem 0;
}
.note p:last-child { margin-bottom: 0; }

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

.contact-hero { padding-block: clamp(3rem, 8vw, 7rem) clamp(4rem, 10vw, 8rem); }
.contact-hero h1 { margin-bottom: 1.4rem; }
.contact-text {
	font-size: clamp(1.18rem, 1.05rem + 0.45vw, 1.38rem);
	line-height: 1.55;
	color: var(--ink-2);
	max-width: 38rem;
}
.contact-text p { margin: 0 0 1.2em; }
.contact-text a { color: var(--accent); }

/* Footer ------------------------------------------------------------------------- */

.site-footer {
	margin-top: 0;
	border-top: 1px solid var(--rule);
	background: var(--paper-2);
	font-size: 0.98rem;
	color: var(--ink-2);
}
.site-footer .wrap {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 2rem;
	padding-block: 3rem 2.5rem;
}
.site-footer h2 { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-bottom: 0.7rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-2); }
.site-footer .fine { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 1.2rem; font-size: 0.9rem; color: var(--ink-3); }
.site-footer .fine p { margin: 0 0 0.4rem; }
@media (max-width: 44rem) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .about-col { grid-column: 1 / -1; } }

/* Reduced motion: nothing moves. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* The prepare/decide figure on the AI page lines up with the text column. */
.ai-handoff { max-width: 50rem; margin: 2rem 0 1rem; }
@media (min-width: 56.01rem) {
	.ai-handoff { margin-left: calc(14rem + clamp(2rem, 5vw, 5rem)); }
}
.with-toc + .wrap, .wrap + .with-toc { margin-top: 0; }
.prose section { scroll-margin-top: 1rem; }
.two-col p { color: var(--ink-2); margin: 0; }

/* Logo review page ---------------------------------------------------------------- */
.lc.day { --lc-bg: #f4f1ea; --lc-ink: #1d1a16; --lc-flame: #b88a3c; --lc-labs: #8c5426; --lc-glow: 0; }
.lc.night { --lc-bg: #12151a; --lc-ink: #ede7db; --lc-flame: #e7ad62; --lc-labs: #d9a06a; --lc-glow: 0.22; }
.lc { background: var(--lc-bg); color: var(--lc-ink); }
.lc .lm { color: var(--lc-ink); flex: none; }
.lc .lm .f { color: var(--lc-flame); }
.lc .lm .g { fill: var(--lc-flame); stroke: none; opacity: var(--lc-glow); }
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.5rem; }
.logo-card { border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; scroll-margin-top: 1rem; }
.lc-swatches, .lc-lockups { display: grid; grid-template-columns: 1fr 1fr; }
.lc-swatches .lc { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.6rem 0.8rem; }
.lm.big { width: 96px; height: 96px; }
.lc-small { display: grid; gap: 0.7rem; justify-items: center; }
.lm.s32 { width: 32px; height: 32px; }
.lm.s16 { width: 16px; height: 16px; stroke-width: 2.2; }
.lockup { display: flex; align-items: center; gap: 0.55rem; padding: 0.9rem 1rem; border-top: 1px solid rgb(128 128 128 / 0.18); }
.lm.head { width: 2rem; height: 2rem; }
.lockup span { font-family: var(--serif); font-size: 1.35rem; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.wm-a { font-weight: 600; }
.wm-a i { font-weight: 380; color: var(--lc-labs); }
.wm-b { font-weight: 540; }
.lockup .wm-c { font-weight: 560; font-size: 1.05rem; letter-spacing: 0.14em; }
.lockup .wm-d { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; }
.lc-text { padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--rule); }
.lc-text h2 { font-size: 1.25rem; margin-bottom: 0.3rem; }
.lc-text p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.wm-section { margin-block: 4rem 5rem; }
.wm-grid { display: grid; gap: 0.6rem; margin-top: 1.5rem; }
.wm-row { display: grid; grid-template-columns: 1fr 1fr minmax(10rem, 0.8fr); gap: 0.6rem; align-items: center; }
.wm-row .lockup { border: 1px solid var(--rule); border-radius: 4px; }
.wm-row p { margin: 0; font-size: 0.95rem; color: var(--ink-3); }
.wm-sep { border: 0; border-top: 1px solid var(--rule); margin: 1rem 0; }
@media (max-width: 40rem) { .wm-row { grid-template-columns: 1fr; } }

/* Founder letter: a sheet of paper on the page, the way hey.com does it ------------------ */
:root { --sheet: #fcfaf5; --sheet-shadow: 60 44 24; }
:root[data-theme="night"] { --sheet: #1f242b; --sheet-shadow: 0 0 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) { --sheet: #1f242b; --sheet-shadow: 0 0 0; } }
.letter-title { text-align: center; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.letter {
	max-width: 40rem;
	margin-inline: auto;
	padding: clamp(1.8rem, 1rem + 5vw, 4.2rem) clamp(1.4rem, 0.6rem + 5vw, 4.5rem);
	background: var(--sheet);
	border-radius: 2px;
	transform: rotate(-0.6deg);
	box-shadow:
		0 0 0 1px rgb(var(--sheet-shadow) / 0.05),
		0 3px 26px -12px rgb(var(--sheet-shadow) / 0.18),
		0 8px 40px -20px rgb(var(--sheet-shadow) / 0.28),
		0 20px 28px -30px rgb(var(--sheet-shadow) / 0.45);
}
.letter p { font-family: var(--serif); font-size: clamp(1.12rem, 1.04rem + 0.35vw, 1.27rem); line-height: 1.62; }
.letter .signature { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 2.2rem 0 0; }
.signer { display: flex; align-items: center; gap: 0.85rem; }
.signer dl { margin: 0; }
.letter .signature dt { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.2; }
.letter .signature dd { margin: 0; font-size: 0.92rem; color: var(--ink-3); }
/* a place for a photo: put an <img> inside .avatar and it fills the circle */
.avatar {
	flex: none; display: grid; place-items: center; overflow: hidden;
	width: 3.4rem; height: 3.4rem; border-radius: 50%;
	background: var(--paper-3); color: var(--ink-3);
	font: italic 500 1.4rem var(--serif);
	box-shadow: 0 0 0 3px var(--sheet), 0 0 0 4px var(--rule);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 26rem) { .avatar { width: 2.8rem; height: 2.8rem; font-size: 1.2rem; } .letter .signature dt { font-size: 1.15rem; } }
.letter-more { text-align: center; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; }
@media (max-width: 40rem) { .letter { transform: none; } }

/* More to read: the pills that link the standalone pages ------------------------------ */
.reading h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); margin-bottom: 1.2rem; }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pills a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.45rem 1.1rem;
	border: 1px solid var(--rule);
	border-radius: 999px;
	color: var(--ink);
	text-decoration: none;
	line-height: 1.3;
}
.pills a:hover { border-color: var(--accent); color: var(--accent); }

/* Standalone topic pages and help articles: one readable column --------------------- */
.topic { padding-bottom: clamp(2rem, 5vw, 3.5rem); font-size: clamp(1.15rem, 1.06rem + 0.4vw, 1.32rem); line-height: 1.62; }
.topic > * { max-width: 40rem; }
.topic h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-top: 2.6rem; margin-bottom: 0.7rem; }
.topic p { margin-bottom: 1.05em; }
.topic strong { font-weight: 700; color: var(--ink); }
.topic li { margin-bottom: 0.5em; }
.topic ul, .topic ol { padding-left: 1.3rem; }
.topic li::marker { color: var(--cedar); }

/* the painting at the top of a standalone page: beside the heading, blended
   into the page like the home page's porch (from the left and at its foot) */
.page-head.has-art { position: relative; overflow: hidden; min-height: min(29vw, 26rem); display: flex; align-items: flex-start; }
.page-head.has-art > .wrap { position: relative; z-index: 2; }
.page-head.has-art > .wrap > * { max-width: 34rem; }
.page-head.has-art h1 { max-width: 16ch; }
.page-art, .scene.page-art {
	position: absolute; top: 0; margin: 0;
	/* the right edge of the text column, not of the window */
	right: max(0px, calc((100% - var(--wide)) / 2 + var(--gutter)));
	width: min(46vw, 40rem); aspect-ratio: 3 / 2;
	border-radius: 0; box-shadow: none; background: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 46%, #000 92%, transparent), linear-gradient(180deg, #000 62%, transparent 98%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 4%, #000 46%, #000 92%, transparent), linear-gradient(180deg, #000 62%, transparent 98%);
	mask-composite: intersect;
}
figure.page-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.page-art .still-night { display: none; }
:root[data-theme="night"] .page-art .still-night { display: block; }
:root[data-theme="night"] .page-art .still-day { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) .page-art .still-night { display: block; }
	:root:not([data-theme="day"]) .page-art .still-day { display: none; }
}
.page-art .scene-tap { left: auto; right: 1rem; bottom: 18%; }

/* phones: a band across the top that fades out under the headline */
@media (max-width: 52rem) {
	.page-head.has-art { display: block; min-height: 0; padding-top: 38vw; }
	.page-art, .scene.page-art {
		width: 100%;
		-webkit-mask-image: linear-gradient(180deg, #000 38%, transparent 84%);
		mask-image: linear-gradient(180deg, #000 38%, transparent 84%);
	}
	.page-art .scene-tap { top: 0.8rem; bottom: auto; }
	figure.page-art:not(.scene) { aspect-ratio: 2 / 1; }
	.page-head.has-art:not(:has(.scene)) { padding-top: 32vw; }
	.page-head.has-art:has(.scene) { padding-top: 54vw; }
}

/* Help --------------------------------------------------------------------------- */
.crumb { font-size: 0.95rem; color: var(--ink-3); margin-bottom: 0.8rem; }
.crumb a { color: var(--ink-3); }
.help-head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
.help-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 2.5rem 3rem;
	padding-bottom: clamp(3rem, 6vw, 5rem);
}
.help-groups h2 { font-family: var(--sans); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--cedar); margin-bottom: 0.4rem; }
.help-groups ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.help-groups li { border-bottom: 1px solid var(--rule); }
.help-groups a { display: block; padding: 0.8rem 0; font-size: 1.12rem; color: var(--ink); text-decoration: none; }
.help-groups a:hover { color: var(--accent); text-decoration: underline; }
.ask-person {
	max-width: var(--measure);
	margin: 0 0 clamp(3rem, 6vw, 5rem);
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--honey);
	background: var(--paper-2);
	border-radius: 0 6px 6px 0;
}
@media (max-width: 23rem) {
	.site-nav a { font-size: 0.92rem; }
	.site-nav .nav-cta a { padding: 0 0.7rem; }
}

/* Familiar problems: one painted scene per problem, alternating sides, like hey.com.
   Each painting has a blank surface (sign, phone, statement, laptop, napkin) and
   live HTML is laid onto it in perspective by scenes.js. Taps only. */
.scenes { display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); }
.scene-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.6rem, 4.5vw, 4.5rem); align-items: center; }
.scene-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.scene-row.flip .scene, .scene-row.flip .objects { order: 2; }
.scene-text h2 { margin-bottom: 0.8rem; }
.scene-text .eyebrow { margin-bottom: 0.9rem; }
.scene-text p:not(.eyebrow) { color: var(--ink-2); font-size: clamp(1.12rem, 1.05rem + 0.3vw, 1.25rem); }
@media (max-width: 52rem) {
	/* phones: heading, then the painting, then the words and the link */
	.scene-row, .scene-row.flip { grid-template-columns: 1fr; gap: 0; }
	.scene-row .scene-text { display: contents; }
	.scene-row .scene-text h2, .scene-row .scene-text .eyebrow { order: 1; }
	.scene-row .scene-text h2 { margin-bottom: 1.1rem; }
	.scene-row .scene, .scene-row.flip .scene, .scene-row .objects { order: 2; margin-bottom: 1.2rem; }
	.scene-row .scene-text p:not(.eyebrow) { order: 3; }
}

.scene { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: var(--paper-3); box-shadow: 0 18px 40px -26px rgb(var(--sheet-shadow) / 0.55); }
.scene > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene .still-night { display: none; }
:root[data-theme="night"] .scene .still-night { display: block; }
:root[data-theme="night"] .scene .still-day { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) .scene .still-night { display: block; }
	:root:not([data-theme="day"]) .scene .still-day { display: none; }
}

/* a tap shows the painted "after" state of the one surface that changes */
.scene .after { position: absolute; opacity: 0; pointer-events: none; }
.scene .after img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene.is-after .after { opacity: 1; }
[data-scene="hours"] .after { left: 66.211%; top: 51.562%; width: 8.789%; height: 24.707%; transition: opacity 0.35s; }
[data-scene="bill"] .after { left: 19.401%; top: 45.410%; width: 54.948%; height: 39.648%; opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s ease-in-out; }
[data-scene="bill"].is-after .after { clip-path: inset(0 0 0 0); }
[data-scene="sheet"] .after { left: 41.602%; top: 34.180%; width: 37.305%; height: 33.691%; transition: opacity 0.3s; }
[data-scene="napkin"] .after { left: 23.372%; top: 43.164%; width: 53.776%; height: 42.871%; opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path 2.6s ease-in-out; }
[data-scene="napkin"].is-after .after { clip-path: inset(0 0 0 0); }
[data-scene="napkin"].redraw .after { transition: none; clip-path: inset(0 100% 0 0); }
html:not(.js) [data-scene="napkin"] .after { clip-path: none; }

.scene-tap {
	position: absolute; left: 0.8rem; bottom: 0.8rem;
	display: inline-flex; align-items: center; gap: 0.45rem;
	min-height: 38px; padding: 0 0.85rem 0 0.7rem;
	border: 1px solid rgb(60 44 24 / 0.18); border-radius: 999px;
	background: rgb(250 246 238 / 0.9); color: #2b241c;
	font: 600 0.88rem var(--sans);
	box-shadow: 0 4px 14px -8px rgb(40 28 12 / 0.6);
	cursor: pointer;
}
.scene-tap::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #b88a3c; box-shadow: 0 0 0 4px rgb(184 138 60 / 0.25); }
.scene-tap:hover { background: #fffaf1; }
html:not(.js) .scene-tap { display: none; }

/* Reference pages (Services, How we work, AI, Build together, About): one calm
   column, larger type, bold lead-ins instead of tables, boxes and grids. */
.with-toc > * { max-width: 46rem; }
.with-toc { display: block; font-size: clamp(1.12rem, 1.04rem + 0.35vw, 1.26rem); line-height: 1.62; }
.with-toc .service .summary { font-size: 1.18em; color: var(--ink); }
.with-toc p, .with-toc li { color: var(--ink-2); }
.with-toc strong { color: var(--ink); font-weight: 700; }
.fit, .two-col { display: block; margin: 1.2rem 0 1.6rem; }
.fit > div, .two-col > div { border: 0; padding: 0; margin-bottom: 1.1rem; }
.fit h3, .two-col h3 { font: 700 1em/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 0.3rem; }
.fit ul, .two-col ul { font-size: 1em; padding-left: 1.3rem; }
.fit li::marker, .two-col li::marker { color: var(--cedar); }
.two-col p { color: var(--ink-2); }
.plain { max-width: 46rem; font-size: clamp(1.12rem, 1.04rem + 0.35vw, 1.26rem); line-height: 1.62; }
.plain p { color: var(--ink-2); }
.plain strong { color: var(--ink); font-weight: 700; }
.story { font-size: 0.92em; }

/* Day and evening: a slow crossfade of the whole page (theme.js), or, where
   the browser can't, a fade of the colours. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 1.1s; animation-timing-function: ease-in-out; }
html.theme-fade, html.theme-fade * { transition: background-color 0.9s ease, color 0.9s ease, border-color 0.9s ease, fill 0.9s ease !important; }
.band .still-night { display: none; }
:root[data-theme="night"] .band .still-night { display: block; }
:root[data-theme="night"] .band .still-day { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) .band .still-night { display: block; }
	:root:not([data-theme="day"]) .band .still-day { display: none; }
}

/* Objects on the page: small paintings (each alone, one light from the upper
   left) laid straight on the page, no frames. Shadows and the evening tint are
   prepared images (scripts/build-objects.py), never CSS filters: phones smear
   filtered shadows on moving or rotated images. */
.objects { position: relative; aspect-ratio: 4 / 3; }
.obj { position: absolute; }
.obj-body { position: relative; display: block; }
.obj-img { position: relative; display: block; width: 100%; height: auto; }
/* the shadow image is padded by 8% of the object's width on every side */
.obj-shadow { position: absolute; left: -8%; top: 0; margin-top: -8%; width: 116%; height: auto; max-width: none; pointer-events: none; }
.obj .still-night { display: none; }
:root[data-theme="night"] .obj .still-night { display: block; }
:root[data-theme="night"] .obj .still-day { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) .obj .still-night { display: block; }
	:root:not([data-theme="day"]) .obj .still-day { display: none; }
}
/* standing things: a pool of shadow on the table at their foot */
.obj-mug .obj-body::before, .obj-laptop .obj-body::before {
	content: ""; position: absolute; left: 0; right: -24%; bottom: -6%; height: 22%;
	background: radial-gradient(ellipse 50% 50% at 46% 50%, rgb(60 40 20 / 0.3), rgb(60 40 20 / 0.12) 50%, transparent 72%);
}
.obj-laptop .obj-body::before { left: 4%; right: -8%; bottom: -5%; height: 24%; }
:root[data-theme="night"] .obj-mug .obj-body::before, :root[data-theme="night"] .obj-laptop .obj-body::before { background: radial-gradient(ellipse 50% 50% at 54% 50%, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.22) 50%, transparent 72%); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) .obj-mug .obj-body::before, :root:not([data-theme="day"]) .obj-laptop .obj-body::before { background: radial-gradient(ellipse 50% 50% at 54% 50%, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.22) 50%, transparent 72%); }
}
.steam { position: absolute; left: -12%; right: 12%; bottom: 90%; height: 150%; pointer-events: none; }
.steam canvas { display: block; width: 100%; height: 100%; }

/* hours: the sign on the door says closed; the phone says open now */
.objects-hours .obj-sign { left: 4%; top: 2%; width: 52%; transform: rotate(-1.5deg); }
.objects-hours { aspect-ratio: 16 / 9; }
.objects-hours .obj-phone { right: 4%; top: 11%; width: 44%; transform: rotate(9deg); }
/* the bill, out of its envelope */
.objects-bill .obj-envelope { left: 0; top: 4%; width: 58%; transform: rotate(-8deg); }
.objects-bill .obj-statement { left: 36%; top: 12%; width: 54%; transform: rotate(4deg); }
/* the spreadsheet on a clipboard */
/* the laptop stands on the table: a soft pool of shadow under its base */
.objects-sheet .obj-laptop { left: 8%; top: 8%; width: 84%; }
/* the idea on a napkin, with coffee */
.objects-napkin .obj-napkin { left: 14%; top: 4%; width: 66%; transform: rotate(-4deg); }
.objects-napkin .obj-pencil { left: 44%; bottom: 0; width: 46%; transform: rotate(4deg); }
@media (max-width: 52rem) {
	.objects { margin-bottom: 1.4rem; }
}

/* Sections as sheets of paper laid one over the next: a soft shadow along each
   section's top edge, falling onto the one above, and a faint lit edge. */
main > .section { position: relative; box-shadow: 0 -16px 28px -22px rgb(var(--sheet-shadow) / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.55); }
:root[data-theme="night"] main > .section { box-shadow: 0 -16px 28px -20px rgb(0 0 0 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.04); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="day"]) main > .section { box-shadow: 0 -16px 28px -20px rgb(0 0 0 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.04); }
}
.section + .section, .section.tint + .section { border-top: 0; }

/* sway.js: the sign swings from its nail; papers shift and settle */
[data-swing] .obj-body { transform: rotate(var(--swing, 0deg)); transform-origin: 50% 3%; }
[data-swing], [data-slide] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-slide] .obj-body { transform: var(--slide, none); }