@charset "utf-8";

/* Fonts
==================================== */
/* IBM Plex Mono, self-hosted (OFL 1.1 — see fonts/OFL.txt). Nick picked it at 11.5px
   on 2026-07-26, replacing the OCRF/Courier stack: OCRF is ProdCo's licensed face and
   the file was never obtained, so the site had been serving the Courier fallback.
   Latin + latin-ext only; weight 300 is the body, 400/600/700 are the deck's <b>. */
@font-face{
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-300-latin.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-300-latin-ext.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-700-latin.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
	font-family: 'IBM Plex Mono';
	src: url('../fonts/ibm-plex-mono-700-latin-ext.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Vars
==================================== */
:root{
	--font: 'IBM Plex Mono', Courier, monospace;
	--fs: 11.5px;
	--lh: calc(18/13);

	--color-bg: white;
	--color-text: black;

	/*Easing*/
	--speed: 300ms;
	--speedx2: calc(var(--speed)*2);
	--ease: cubic-bezier(0.83, 0, 0.17, 1);

	/*Margins*/
	--margin-sides: 15px;
	--margin-top: var(--margin-sides);
	--gap-cols: var(--margin-sides);
	--gap-rows: calc(var(--margin-sides)*3);
	--gap-small: 5px;

	/*Elements*/
	--height-text: calc(var(--fs)*var(--lh));
	--height-rule: calc(var(--height-text)/2);

	/*Viewport*/
	--h: 100vh;

	/*Cols*/
	--col: 7;
	--colX2: calc(var(--col)*2);
}
@media (max-width: 1920px){
	:root{ --col: 4; }
}
@media (max-width: 1024px){
	:root{ --col: 3; }
}
@media (max-width: 768px){
	:root{ --col: 2; }
}
@media (max-width: 500px){
	:root{ --col: 1; }
}

/* Reset
==================================== */
*,
*::after,
*::before{
	box-sizing: border-box;
	-webkit-tap-highlight-color: #fff0;
}
html, body,
header, footer,
main, section, article, aside,
menu, nav, a,
h1, h2, h3, h4, h5, h6, hgroup,
div, span, p, ol, ul, li,
strong, b, em, i, u, s, sub, sup,
address, time, blockquote,
form, fieldset, label,
figure, figcaption, hr,
iframe, embed, audio{
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
html{
	font-size: var(--fs);
}
::selection{
	color: var(--color-bg);
	background-color: var(--color-text);
}
:focus,
:focus-visible{
	outline: none !important;
}
::-moz-focus-inner{
	border: none !important;
}
svg{
	overflow: visible;
}
a{
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.desktop a:hover,
.mobile a:active{
	text-decoration: underline;
}

/* Body
======================================== */
body{
	width: 100vw;
	height: 100%;
	margin: auto;
	font-family: var(--font);
	font-size: var(--fs);
	font-style: normal;
	font-weight: 300;
	font-feature-settings: 'liga' off;
	line-height: calc(var(--lh)*100%);
	/* iOS Safari IGNORES `none` here (treats it as auto) and still auto-inflates wide
	   text blocks — e.g. the deck's full-width stacked board actions rendered ~1.4x the
	   nav. A percentage IS honored, so 100% pins every page's text to its authored size
	   and the nav matches across landing + deck on mobile (Nick 2026-07-19). */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--color-text);
	background-color: var(--color-bg);
	overflow-x: hidden;
}

/* Global
==================================== */
#content-wrapper{
	width: 100vw;
	height: fit-content;
	min-height: var(--h);
	padding: 0 var(--margin-sides);
	display: grid;
	grid-template-rows: min-content 1fr min-content;
	row-gap: var(--gap-rows);
}
.page-index main{
	display: grid;
	grid-auto-rows: min-content;
	row-gap: calc(var(--gap-rows) - var(--gap-small));
}
@media (min-width: 501px){
	body:not(.page-project) main{
		margin-top: calc(var(--margin-top)*-1);
	}
}

/* Dark Mode
==================================== */
.dark-mode{
	--color-bg: black;
	--color-text: white;
}

/* Nav
==================================== */
header,
footer{
	position: sticky;
	position: -webkit-sticky;
	min-height: var(--height-rule);
	display: grid;
	grid-template-columns: repeat(var(--colX2), 1fr);
	grid-auto-rows: min-content;
	column-gap: var(--gap-cols);
	z-index: 9;
}
header{
	top: 0;
	background-color: var(--color-bg);
}
footer{
	margin-top: var(--gap-rows);
	bottom: 0;
}
.page-index footer{
	margin-top: calc(var(--gap-rows) - var(--gap-small));
}
header > *,
footer > span{
	position: relative;
}
footer > span{
	display: block;
	height: var(--height-rule);
}
@media (max-width: 1024px){
	header,
	footer{
		grid-template-columns: repeat(3, 1fr);
	}
	header > *,
	footer > span{
		grid-column: auto !important;
	}
}
@media (min-width: 769px) and (max-width: 1024px){
	header::after,
	footer::after{
		content: '';
		position: absolute;
		right: 0;
		width: 1px;
		height: var(--height-rule);
		background-color: var(--color-text);
	}
	header::after{ top: 0; }
	footer::after{ bottom: 0; }
}
@media (min-width: 501px){
	header > *{
		padding: var(--margin-top) 0;
	}
}
@media (max-width: 500px){
	header{
		padding: var(--margin-top) 0;
		row-gap: var(--gap-small);
	}
	header,
	footer{
		grid-template-columns: 1fr;
	}
	header > *{
		justify-self: flex-start !important;
	}
	footer > span{
		display: none;
	}
}

/*Pos — header/footer always use the same 8-col geometry so links stay put on wide screens*/
.first{ grid-column: 3 / 6; }
.middle{ grid-column: 6 / 9; }
.last{ grid-column: 9 / -1; }
@media (min-width: 1025px){
	header,
	footer{ grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 1025px){
	.middle{ left: calc(var(--gap-cols)/2*-1); }
}
@media (max-width: 768px){
	.middle{ justify-self: center; }
	.last{ justify-self: flex-end; }
}

/* Header nav — SINGLE SOURCE OF TRUTH for landing, deck & every page. Do NOT re-declare
   header column-gap / flex-wrap in deck.css (that duplication kept the two drifting).

   769px and up: the nav is the shared header/footer GRID (above), with WORK / CONTACT /
   ARCHIVE pinned to fixed grid columns via .first/.middle/.last. Gaps then scale with the
   column geometry instead of with a vw clamp, so the links hold their proportional
   position while resizing rather than sliding and snapping at each breakpoint.

   768px and down is untouched flex — centered wrap on tablet, and the phone rules below
   (plus deck.css's FILTERS as a 4th item) keep the mobile nav exactly as it was. */
@media (max-width: 768px){
	header{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		column-gap: clamp(1.5rem, 7vw, 5rem);
		row-gap: var(--gap-small);
	}
}
header::after{ content: none !important; }  /* drop the tablet-width right divider */
@media (max-width: 500px){
	header{ column-gap: 2rem; }                       /* phones: one snug centered row */
}

/* 769px and up: three equal columns, WORK left / CONTACT dead centre / ARCHIVE
   right, inset from both edges so the trio occupies the middle 65% of the width —
   the same spread as prodco.xyz, but symmetric rather than hanging right. The inset
   is a percentage, so the whole nav scales with the window instead of sliding and
   snapping. Overrides the shared 8-col .first/.middle/.last geometry for the header
   only; the footer keeps it. */
@media (min-width: 769px){
	header{ grid-template-columns: repeat(3, 1fr); padding-inline: 17.5%; }
	header .first{ grid-column: 1; justify-self: start; }
	header .middle{ grid-column: 2; justify-self: center; left: auto; }
	header .last{ grid-column: 3; justify-self: end; }
}

/*Rules (header lines removed by request; footer keeps its rules)*/
@media (min-width: 501px){
	footer > span::before{
		content: '';
		position: absolute;
		top: 0;
		width: 1px;
		height: var(--height-rule);
		background-color: var(--color-text);
	}
}
@media (max-width: 768px){
	.middle::before{ left: 50%; }
	.last::before{ right: 0; }
}

/*Black & White Toggle*/
#toggle-mode{
	margin-bottom: 4px;
	grid-column: 1 / -1;
	display: flex;
	gap: 6px;
}
#toggle-mode > span{
	width: 12px;
	height: 12px;
	border: 1px solid var(--color-text);
	border-radius: 100px;
	cursor: pointer;
}
.black{ background-color: var(--color-text); }
.dark-mode .white{ background-color: var(--color-text); }
.dark-mode .black{ background-color: var(--color-bg); }
@media (max-width: 1024px){
	#toggle-mode{ justify-content: flex-end; }
	#toggle-mode > span{ width: 18px; height: 18px; }
}

/* Media
======================================== */
video.no-autoplay{
	pointer-events: none;
}
.thumb{
	width: 100%;
	height: auto;
	display: block;
	font-size: 0;
	line-height: 0;
	-webkit-user-select: none;
	user-select: none;
	opacity: 1;
	transition: opacity var(--speedx2) linear;
}
.lazy{
	opacity: 0;
}

/* Triggers
======================================== */
.trigger{
	width: fit-content;
	text-transform: uppercase;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}
.trigger > *{
	pointer-events: none !important;
}

/* Module: videos
======================================== */
.module-videos{
	display: grid;
	grid-template-columns: repeat(var(--col), 1fr);
	grid-auto-rows: min-content;
	grid-gap: var(--gap-rows) var(--gap-cols);
}

/* Landing grid only: lock to 4-across, dropping straight to 2-across on small
   screens (skip the 3-, 7- and 1-across steps) so rows stay even. Keep the
   landing count a multiple of 4 for perfectly full rows. Archive is untouched. */
.page-index:not(.page-archive) .module-videos{
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px){
	.page-index:not(.page-archive) .module-videos{
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 768px){
	.page-index:not(.page-archive) .module-videos{
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Work grid: hold 5 across all the way down to 1025px, then drop straight to 3 —
   the 4-across step is skipped so rows stay even. Above 1920px the shared --col
   ladder still gives 7; below 1025px it gives 3 / 2 / 1. Scoped to the grid: --col
   also drives the nav's column count. */
@media (min-width: 1025px) and (max-width: 1920px){
	.page-archive .module-videos{
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Landing accordion: FIVE across at every width down to the 2-across step, so a
   section is always one full row of five and the thumbnails simply scale with the
   window. Both the 3-across step (1024px and below) and the 7-across one (above
   1920px, where five spots left two empty columns) are skipped — the sections hold
   exactly five, so any other column count either breaks the row or pads it.
   Below 769px the shared ladder takes over again: 2 across, then 1 at 500px. */
@media (min-width: 769px){
	.page-sort .module-videos{
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Card: video
======================================== */
.module-project{
	display: grid;
	grid-auto-rows: min-content;
	row-gap: var(--gap-small);
}
.module-project_link{
	position: relative;
	width: auto;
	padding-top: 58.82%;
	display: block;
}
.module-project_link .thumb{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	object-fit: cover;
}
.module-project_info > *:first-child:not(.module-project_info-title){
	text-transform: uppercase;
}

/* Mobile-only thumbnail carousel (Instagram-style swipe) */
.thumb-carousel{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	overflow: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.thumb-carousel::-webkit-scrollbar{
	display: none;
}
.thumb-carousel img{
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scroll-snap-align: start;
	-webkit-user-select: none;
	user-select: none;
}
@media (max-width: 500px){
	.thumb-carousel{
		overflow-x: auto;
	}
}
.desktop .module-project_link:hover + .module-project_info .module-project_info-title,
.mobile .module-project_link:active + .module-project_info .module-project_info-title{
	text-decoration: underline;
}

/* Project
==================================== */
.page-project main{
	padding: calc(var(--margin-top) - var(--gap-small)) var(--margin-sides) calc(var(--gap-rows)*2);
	display: grid;
	grid-auto-rows: min-content;
	row-gap: var(--gap-rows);
}
#project-container{
	width: 100%;
	max-width: 1180px;
	display: grid;
	grid-auto-rows: min-content;
	row-gap: var(--gap-rows);
	justify-self: center;
}
#project-videos{
	display: grid;
	grid-auto-rows: min-content;
	row-gap: var(--gap-rows);
}
/*Single Bar*/
/* One consistent layout at EVERY width, pinned to the 1180 content column so the
   prev/next arrows track the video edges (not the viewport edges) and nothing
   jumps at a breakpoint. Previously flipped to a fixed, full-bleed 1fr/1180/1fr
   grid at >=1367px, which flung < > to the page edges and moved CLOSE. */
#single-bar{
	display: grid;
	color: white;
	mix-blend-mode: difference;
	pointer-events: none;
	z-index: 9;
	position: sticky;
	position: -webkit-sticky;
	top: calc(var(--margin-top) - var(--gap-small));
	width: 100%;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	grid-template-columns: max-content 1fr max-content;
}
#single-bar > *{
	pointer-events: all;
	-webkit-user-select: none;
	user-select: none;
}
.desktop #single-bar > *:hover,
.mobile #single-bar > *:active{
	text-decoration: none;
}
#prev::before,
#next::before{ content: '[ '; }
#prev::after,
#next::after{ content: ' ]'; }
#close{ justify-self: center; }

/*Thumbnail / video*/
.page-project .thumb{
	width: 100%;
	max-height: calc(var(--h) - var(--height-text)*2);
}
.vimeo_wrapper,
.local_video_wrapper{
	width: 100%;
}

/* Video facade: our thumbnail + play button, swaps to Vimeo on click */
.video-facade{
	width: 100%;
	cursor: pointer;
}
.video-facade img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.video-facade iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-facade .play-btn{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	padding: 0;
	background: none;
	border: none;
	border-top: 14px solid transparent;
	border-bottom: 14px solid transparent;
	border-left: 23px solid #fff;
	cursor: pointer;
	filter: drop-shadow(0 0 8px rgba(0,0,0,0.4));
}
.desktop .video-facade:hover .play-btn{
	border-left-color: #fff;
	opacity: 0.85;
}
/* Campaign pages: several stacked videos with small labels */
.video-facade + .video-label,
.video-facade + .video-facade,
img.thumb + .video-label{
	margin-top: var(--gap-cols, 20px);
}
.video-label{
	font-size: var(--font-size, var(--fs));
	text-transform: uppercase;
	margin-bottom: 6px;
}
/* Gallery: carousel stills below the credits on project pages */
.project-gallery{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap-cols, 15px);
	margin-top: var(--gap-rows, 45px);
}
.project-gallery img{
	width: 100%;
	height: auto;
	display: block;
	align-self: start;
}
@media (max-width: 768px){
	.project-gallery{ display: none; }
	.mobile-gallery .project-gallery{ display: grid; grid-template-columns: 1fr; }
}
.local_video_wrapper video{
	width: 100%;
	display: block;
}
.project-stills{
	display: grid;
	grid-auto-rows: min-content;
	row-gap: var(--gap-cols);
}
.project-stills img{
	width: 100%;
	display: block;
}

/*Credits*/
@media(min-width: 601px){
	.project-credits{
		column-count: 2;
		column-gap: var(--gap-cols);
	}
}
.project-credits p{
	break-inside: avoid;
}
.project-credits p.spacer{
	height: var(--height-text);
}
.credits-v2 .credits-hero{
	break-inside: avoid;
}
/* Phones show the FULL credit list, same as desktop — the rest of the crew used to be
   hidden here and Nick wants it back (2026-07-27). The hero block still leads; the
   remainder stacks under it in one column, since .project-credits only goes two-up
   at 601px and above. */

/* Archive filters
==================================== */
#archive-filters{
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-small) 2ch;
	/* keep the category filters visible while scrolling — sticky just under the header
	   (JS sets `top` to the current header height so it adapts across breakpoints) */
	position: sticky;
	top: 0;
	z-index: 8;
	background: var(--color-bg);
	padding: var(--gap-small) 0;
}
.archive-filter{
	text-transform: uppercase;
}
.desktop .archive-filter:hover{
	text-decoration: underline;
}
.archive-filter.active{
	text-decoration: none;
}
/* reserve the bracket space on every filter so the row doesn't shift when one is highlighted */
.archive-filter::before{ content: '[ '; visibility: hidden; }
.archive-filter::after{ content: ' ]'; visibility: hidden; }
.archive-filter.active::before,
.archive-filter.active::after{ visibility: visible; }
.module-project.filtered-out{
	display: none;
}

/* Contact
==================================== */
.page-contact main{
	align-self: center;
	display: grid;
	grid-auto-rows: min-content;
	grid-gap: var(--gap-rows) var(--gap-cols);
	text-align: center;
}
.desktop.page-contact main a:hover,
.mobile.page-contact main a:active{
	text-decoration: underline;
}
.page-contact main p:not(:last-child){
	margin-bottom: var(--height-text);
}
.page-contact footer{
	margin-top: 0;
}
.contact-section_title{
	margin-bottom: var(--height-text);
}


/* ---- Responsive refinements (mobile nav, landing 1-up, filters) ---- */
/* Two-thumbnail width: spread WORK / ARCHIVE / CONTACT edge to edge. Stops at 768px —
   769px and up the nav is back on the grid geometry, which does its own spacing. */
@media (min-width: 501px) and (max-width: 768px){
	header{ justify-content: space-between; column-gap: 1rem; }
}
/* Phones: vertical, left-justified nav + single-column landing + vertical archive filters */
@media (max-width: 500px){
	header{ flex-direction: column; align-items: flex-start; justify-content: flex-start; column-gap: 0; row-gap: var(--gap-small); }
	.page-index:not(.page-archive) .module-videos{ grid-template-columns: 1fr; }
	#archive-filters{ flex-direction: column; align-items: flex-start; }
}
/* Hide Beauty + Long Form filter chips for now (projects keep the category) */
.archive-filter[data-filter="Beauty"],
.archive-filter[data-filter="Long Form"]{ display: none; }

/* Mobile: filter chips sit flush-left, aligned with the WORK/ARCHIVE/CONTACT
   nav. The active chip's brackets are absolutely positioned so the opening
   bracket hangs just past the left edge into the margin and the label never
   shifts — every chip stays aligned whether highlighted or not. */
@media (max-width: 500px){
	.archive-filter{ position: relative; }
	.archive-filter::before,
	.archive-filter::after{ content: none; }
	.archive-filter.active::before{ content: '['; position: absolute; right: 100%; margin-right: 0.3ch; visibility: visible; }
	.archive-filter.active::after{ content: ']'; position: absolute; left: 100%; margin-left: 0.3ch; visibility: visible; }
}

/* Sort page — category accordion
========================================
   EXPERIMENTAL, unlinked page at /sort/. The accordion mechanics are ported from
   the reference site's DIRECTORS list (module-section + module-director); the
   horizontal placement is ours, because the list has to hang off WORK in the nav.

   The nav is inset `padding-inline: 17.5%` at 769px and up, and header and main are
   both full-width children of #content-wrapper — so the same 17.5% on a full-row
   element here puts the category names on WORK's left edge exactly, and keeps them
   there as the window scales (the inset is a percentage, not a fixed gutter).
   Below 769px the nav becomes a centered flex row, alignment to WORK stops meaning
   anything, and the list falls back to the container's left edge.

   Everything is scoped to .page-sort — no other page can be touched by it. */
.page-sort .module-section{
	display: grid;
	grid-auto-rows: min-content;
	row-gap: calc(var(--gap-cols)*2);
}
.page-sort .module-section--content{
	display: grid;
	grid-auto-rows: min-content;
}
.page-sort .module-section--title,
.page-sort .module-cat--title{
	margin-left: 0;
}
@media (min-width: 769px){
	.page-sort .module-section--title,
	.page-sort .module-cat--title{
		margin-left: 17.5%;
	}
}

/* EXPAND ALL toggle + its caret */
.page-sort #toggle-all{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	justify-content: start;
	align-items: center;
	column-gap: 2ch;
	text-transform: uppercase;
}
.page-sort #toggle-all wrap{
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid var(--color-text);
}
.page-sort #toggle-all.active wrap{
	border-top: 5px solid transparent;
	border-bottom: 5px solid var(--color-text);
	transform: translateY(-3px);
}

/* One category */
.page-sort .module-cat--title{
	margin-bottom: var(--gap-small);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	justify-content: start;
	align-items: center;
	text-transform: uppercase;
}
.page-sort .module-cat--content{
	display: grid;
	grid-auto-rows: min-content;
}
.page-sort .module-cat--block-content{
	margin-top: var(--gap-small);
	margin-bottom: var(--gap-rows);
}
.page-sort .module-cat:last-child .module-cat--block-content{
	margin-bottom: var(--gap-small);
}