/* ==========================================================================
   GRID Spatial — the brand book's world (shared page system)
   The look DESIGN.md writes down, for every page except the home page
   (which keeps its own copy in its <style> block for now): book paper and
   chocolate ink, Times Now titles, small-caps labels, tan hairlines,
   palette chips, the "Rendered in-house" tab and the quiet link with its
   drawn arrow. A page opts in with <body class="case-page"> and wraps its
   content in <div class="case"> inside <main>; anything only one page
   uses stays in that page's <style> block.
   Tracks: the 1360px measure split 7:5 around a gutter, with named lines
   (full, main, split, text) so a render can run to the screen's edge while
   its caption keeps to the content edge.
   ========================================================================== */

body.case-page { background-color: #f8f3eb; }
.case-page .header,
.case-page .header.header--sticky { background-color: #f8f3eb; }

.case {
	--g: clamp(1.25rem, 3.5vw, 3.75rem);   /* side gutter */
	--gap: clamp(2.5rem, 5vw, 6rem);       /* picture ↔ text */
	--main: min(100% - 2 * var(--g), 1360px);
	--cols:
		[full-start] 1fr
		[main-start] calc((var(--main) - var(--gap)) * 7 / 12)
		[split] var(--gap)
		[text-start] calc((var(--main) - var(--gap)) * 5 / 12)
		[main-end] 1fr [full-end];
	/* the same tracks, mirrored, for spreads whose picture runs right */
	--cols-mirror:
		[full-start] 1fr
		[main-start] calc((var(--main) - var(--gap)) * 5 / 12)
		[text-end] var(--gap)
		[split] calc((var(--main) - var(--gap)) * 7 / 12)
		[main-end] 1fr [full-end];
	--paper: #f8f3eb;
	--ink: #2A1202;
	--ink-body: #4d3b2c;
	--ink-soft: #7a5a3c;
	--label: #6e5644;
	--rule: rgba(122, 90, 60, .32);
	--shade: #e8dfd2;
	--ease: cubic-bezier(.16, .84, .28, 1);
	display: grid;
	grid-template-columns: var(--cols);
	padding-bottom: clamp(5rem, 10vw, 9rem);
	background-color: var(--paper);
	color: var(--ink-body);
}
.case ::selection { background-color: #2A1202; color: #f8f3eb; }
.case a:focus-visible,
.case button:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.case figure { margin: 0; }
.case img { display: block; max-width: 100%; }

/* -- the shared voices -- */
.case__title {
	margin: 0;
	font-family: "Times Now", serif;
	font-weight: 200;
	font-size: clamp(2rem, 1.35rem + 2.7vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -.005em;
	text-transform: none;
	text-wrap: balance;
	color: var(--ink);
}
.case__lede {
	margin: .7rem 0 0;
	font-family: "Times Now", serif;
	font-weight: 200;
	font-style: italic;
	font-size: clamp(1.125rem, 1rem + .5vw, 1.45rem);
	line-height: 1.4;
	color: var(--ink-soft);
	text-wrap: pretty;
}
.case__type,
.folio-lead__label {
	font-family: "Wix Madefor Display", sans-serif;
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--label);
}
.case__type { margin: 1.15rem 0 0; }
.case__desc {
	max-width: 34em;
	margin: clamp(1.4rem, 2.4vw, 2rem) 0 0;
	font-size: clamp(.9375rem, .9rem + .25vw, 1.0625rem);
	line-height: 1.75;
	color: var(--ink-body);
	text-wrap: pretty;
}
/* a caption on the book's baseline: name left, room right */
.case-cap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .35rem 1rem;
	margin-top: 1rem;
}
.case-cap__name {
	font-family: "Times Now", serif;
	font-weight: 200;
	font-size: clamp(1.25rem, 1rem + .7vw, 1.625rem);
	line-height: 1.15;
	color: var(--ink);
}
.case-cap .case__type { margin: 0; }

/* the brand book's tab, flush to the corner the picture bleeds to */
.folio-lead__tab {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	margin: 0;
	padding: .8rem 1.25rem .75rem;
	background-color: var(--ink);
	font-family: "Wix Madefor Display", sans-serif;
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(248, 243, 235, .88);
}
.folio-lead__tab--right { left: auto; right: 0; }

/* materials and palette, under a hairline, as on the book's pages */
.case-spec__lists {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem clamp(2rem, 3.5vw, 3.25rem);
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-top: clamp(1.4rem, 2.4vw, 1.9rem);
	border-top: 1px solid var(--rule);
}
.case-spec__lists > div { flex: 1 1 13rem; }
.case-spec__lists > div:last-child { flex: 0 0 auto; }
.folio-lead__label { margin: 0 0 .9rem; line-height: 1; }
.folio-lead__list { list-style: none; margin: 0; padding: 0; }
.folio-lead__list li {
	position: relative;
	padding-left: 1.15em;
	font-size: .9375rem;
	line-height: 1.85;
	color: var(--ink-body);
}
.folio-lead__list li::before {
	content: "–";
	position: absolute;
	left: 0;
	color: var(--ink-soft);
}
.folio-lead__palette {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: start;
	gap: .55rem;
	margin: 0;
	padding: 0;
}
.folio-lead__palette li {
	min-width: 3rem;
	font-size: .6875rem;
	line-height: 1.3;
	letter-spacing: .06em;
	color: var(--label);
}
/* each chip's colour is set on its own line in the markup (--c) */
.folio-lead__palette li::before {
	content: "";
	display: block;
	width: 3rem;
	aspect-ratio: 1;
	margin-bottom: .5rem;
	background-color: var(--c);
	box-shadow: inset 0 0 0 1px rgba(42, 18, 2, .08);
}

/* the quiet link, with the drawn arrow (a mask over currentColor) */
.folio__link {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid rgba(42, 18, 2, .35);
	font-family: "Wix Madefor Display", sans-serif;
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink);
	transition: border-color .3s ease;
}
.folio__link::after {
	content: "";
	flex: none;
	width: 1.15em;
	height: .7em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 5h17M12.5.5 17 5l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M0 5h17M12.5.5 17 5l-4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .3s ease;
}
.folio__link:hover,
.folio__link:focus { color: var(--ink); border-bottom-color: var(--ink); }
.folio__link:hover::after { transform: translateX(4px); }

/* ==== What a room is made of =========================================
   Under a hairline on the content measure: the chapter title and its
   line from the brand book under the picture, the description and
   the materials under the text column. */
.case-spec {
	grid-column: main;
	display: grid;
	grid-template-columns: subgrid;
	align-items: start;
	margin-top: clamp(4.5rem, 9vw, 8rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--rule);
}
/* the title and the description share the picture's columns; the
   materials sit under the text column, with no second rule */
.case-spec__lead {
	grid-column: main-start / split;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}
.case-spec__lead .case__desc { margin-top: .35rem; }
.case-spec > .case-spec__lists {
	grid-column: text-start / main-end;
	margin-top: .35rem;
	padding-top: 0;
	border-top: 0;
}

/* ==== A spread, its picture running off the right edge ==============
   The render bleeds right and the text sits on the left, so a page can
   zig-zag with .case-spread--left (below); it opens from the gutter
   outward. */
.case-spread {
	grid-column: full;
	display: grid;
	grid-template-columns: var(--cols-mirror);
	align-items: center;
	margin-top: clamp(6rem, 12vw, 11rem);
}
.case-spread__shot {
	grid-column: split / full-end;
	grid-row: 1;
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--ar, 4 / 3);   /* a page can set --ar on the figure */
	max-height: 88svh;
	background-color: var(--shade);
}
.case-spread__shot img { width: 100%; height: 100%; object-fit: cover; }
.case-spread__text { grid-column: main-start / text-end; grid-row: 1; padding: 1.5rem 0; }
html.js .case-spread__shot.animate-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
	html.js .case-spread__shot.animate-up { clip-path: inset(0 100% 0 0); }
	html.js .case-spread__shot.animate-up img { transform: scale(1.06); transform-origin: 25% 50%; }
	html.js .case-spread__shot.animate-up.is-in {
		clip-path: inset(0);
		transition: clip-path 1.5s var(--ease);
	}
	html.js .case-spread__shot.animate-up.is-in img {
		transform: none;
		transition: transform 2.4s var(--ease);
	}
	/* the palette chips rise one after another */
	html.js .animate-up .folio-lead__palette li::before {
		transform: scaleY(0);
		transform-origin: 50% 100%;
	}
	html.js .animate-up.is-in .folio-lead__palette li::before {
		transform: none;
		transition: transform .9s var(--ease) calc(.5s + var(--i, 0) * .1s);
	}
}

/* ==== Two compositions ================================================
   The brand book's paired pages: two renders at one height with
   their captions, and the book's own title over a rule. */
.case-pair {
	grid-column: main;
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	margin-top: clamp(5rem, 10vw, 9rem);
}
.case-pair__shot {
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: var(--shade);
}
.case-pair__shot img { width: 100%; height: 100%; object-fit: cover; }
.case-pair__close { align-self: end; padding-bottom: 2.6rem; }
.case-pair__title {
	margin: 0 0 1.6rem;
	font-family: "Times Now", serif;
	font-weight: 200;
	font-size: clamp(2rem, 1.2rem + 1.8vw, 3rem);
	line-height: 1.05;
	color: var(--ink);
}
.case-pair__title em { display: block; font-style: italic; color: var(--ink-soft); }
.case-pair__rule { display: block; height: 1px; background-color: var(--rule); }
html.js .case-pair__item + .case-pair__item.is-in { transition-delay: .12s; }

/* ==== The next project, and the way in ===============================
   A hairline, the next project's name large with its render beside
   it, and under the name the line that turns the page toward the
   visitor's own home. */
.case-next {
	grid-column: main;
	display: grid;
	grid-template-columns: subgrid;
	align-items: end;
	margin-top: clamp(6rem, 12vw, 10rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--rule);
}
.case-next__text { grid-column: main-start / split; }
.case-next__name {
	margin: 0;
	font-family: "Times Now", serif;
	font-weight: 200;
	font-size: clamp(2.5rem, 1.3rem + 4vw, 5.5rem);
	line-height: 1;
	letter-spacing: -.01em;
	text-transform: none;
}
.case-next__name a { color: var(--ink); }
.case-next__name a:hover { color: var(--ink-soft); }
.case-next__text > .folio__link { margin-top: clamp(1.75rem, 3vw, 2.4rem); }
.case-next__home {
	max-width: 30em;
	margin-top: clamp(3.5rem, 7vw, 6rem);
	padding-top: clamp(1.4rem, 2.4vw, 1.9rem);
	border-top: 1px solid var(--rule);
}
.case-next__home p {
	margin: 0;
	font-family: "Times Now", serif;
	font-weight: 200;
	font-style: italic;
	font-size: clamp(1.125rem, 1rem + .5vw, 1.45rem);
	line-height: 1.4;
	color: var(--ink-soft);
}
.case-next__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	margin-top: 1.75rem;
}
.case-next__shot {
	grid-column: text-start / main-end;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	max-height: 78svh;
	background-color: var(--shade);
}
.case-next__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 60%;
	transition: transform .9s cubic-bezier(.22, .61, .36, 1);
}
.case-next__shot:hover img { transform: scale(1.03); }

/* ==== Display title ===================================================
   The one large title a page carries: its own name, or a project's. */
.case__display {
	margin: 0;
	font-family: "Times Now", serif;
	font-weight: 200;
	font-size: clamp(2.75rem, 1.4rem + 4.6vw, 6rem);
	line-height: .98;
	letter-spacing: -.01em;
	text-transform: none;
	text-wrap: balance;
	color: var(--ink);
}
.case__title a,
.case__display a { color: inherit; transition: color .3s ease; }
.case__title a:hover,
.case__display a:hover { color: var(--ink-soft); }

/* ==== A spread whose picture runs off the left edge ===================
   The mirror of .case-spread: the render bleeds left, the text sits in
   the text column, and the picture opens from the gutter outward the
   other way. --first starts a page with it, straight under the header. */
.case-spread--left { grid-template-columns: var(--cols); }
.case-spread--left .case-spread__shot { grid-column: full-start / split; }
.case-spread--left .case-spread__text { grid-column: text-start / main-end; }
.case-spread.case-spread--first { margin-top: 0; padding-top: clamp(1.25rem, 3vw, 2.75rem); }
@media (prefers-reduced-motion: no-preference) {
	html.js .case-spread--left .case-spread__shot.animate-up { clip-path: inset(0 0 0 100%); }
	html.js .case-spread--left .case-spread__shot.animate-up img { transform-origin: 75% 50%; }
	html.js .case-spread--left .case-spread__shot.animate-up.is-in { clip-path: inset(0); }
}

/* ==== The opening of an index page (About, Services, Portfolio) =======
   The title and its line on the picture's columns, the copy in the text
   column, on the content measure under the header. */
.case-open {
	grid-column: main;
	display: grid;
	grid-template-columns: subgrid;
	align-items: end;
	row-gap: 2rem;
	padding-top: clamp(2.5rem, 6vw, 5.5rem);
}
.case-open__head { grid-column: main-start / split; }
.case-open__body { grid-column: text-start / main-end; }
.case-open__body > .case__desc:first-child { margin-top: 0; }
.case-open + .case-spread { margin-top: clamp(4rem, 8vw, 7rem); }

/* ==== A ruled index: principles, services, stages =====================
   Items in columns under a hairline, each named in the serif with its
   number set right on the same baseline (the caption's pattern), and a
   short line under it. --n on the list sets how many sit across on a
   wide screen; below 961px it is two, below 601px one. */
.case-index {
	grid-column: main;
	margin-top: clamp(6rem, 12vw, 11rem);
}
.case-index__head { max-width: 46rem; }
.case-index__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
	gap: clamp(2.25rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding: 0;
}
.case-index__item {
	padding-top: clamp(1.2rem, 2vw, 1.6rem);
	border-top: 1px solid var(--rule);
}
.case-index__item .case-cap { margin-top: 0; }
.case-index__item .case-cap__name { margin: 0; text-transform: none; }
.case-index__item .case__desc { margin-top: .85rem; font-size: .9375rem; }
html.js .case-index__item.is-in:nth-child(2) { transition-delay: .08s; }
html.js .case-index__item.is-in:nth-child(3) { transition-delay: .16s; }
html.js .case-index__item.is-in:nth-child(4) { transition-delay: .24s; }

/* ==== The close of a page: the way in ==================================
   A hairline, one line in the italic serif, and the links on from here. */
.case-close {
	grid-column: main;
	margin-top: clamp(6rem, 12vw, 10rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--rule);
}
.case-close__line {
	max-width: 22em;
	margin: 0;
	font-family: "Times Now", serif;
	font-weight: 200;
	font-style: italic;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
	line-height: 1.25;
	color: var(--ink-soft);
	text-wrap: balance;
}
.case-close .case-next__links { margin-top: clamp(1.75rem, 3vw, 2.4rem); }

/* a spread's picture can be a link (the portfolio), and its text can end
   on a quiet link */
.case-spread__shot > a { display: block; width: 100%; height: 100%; }
.case-spread__text > .folio__link { margin-top: clamp(1.75rem, 3vw, 2.4rem); }

/* Below 961px everything stacks onto the content measure, pictures
   first and edge to edge, text under them. */
@media screen and (max-width: 960px) {
	.case-spec__lead { grid-column: main; grid-template-columns: minmax(0, 1fr); }
	.case-spec > .case-spec__lists {
		grid-column: main;
		margin-top: clamp(1.75rem, 5vw, 2.5rem);
		padding-top: clamp(1.4rem, 2.4vw, 1.9rem);
		border-top: 1px solid var(--rule);
	}
	.case-spread { grid-template-columns: var(--cols); margin-top: clamp(5rem, 14vw, 7rem); }
	.case-spread__shot { grid-column: full; grid-row: 1; max-height: none; }
	.case-spread__text { grid-column: main; grid-row: 2; padding: clamp(2rem, 6vw, 2.75rem) 0 0; }
	.folio-lead__tab--right { left: 0; right: auto; }
	.case-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(4rem, 12vw, 6rem); }
	.case-pair__close { display: none; }
	.case-next__text,
	.case-next__shot { grid-column: main; }
	.case-next__shot { grid-row: 1; aspect-ratio: 4 / 3; max-height: none; margin-bottom: clamp(1.75rem, 5vw, 2.5rem); }
	.case-spread--left .case-spread__shot { grid-column: full; }
	.case-spread--left .case-spread__text { grid-column: main; }
	.case-spread.case-spread--first { padding-top: 0; }
	.case-open__head,
	.case-open__body { grid-column: main; }
	.case-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 600px) {
	.case-pair { gap: .9rem; }
	.case-pair .case-cap { display: block; }
	.case-pair .case-cap__name { display: block; font-size: 1.0625rem; }
	.case-pair .case-cap .case__type { display: block; margin-top: .35rem; }
	.case-index__list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.case-next__shot img { transition: none; }
}