/*
 * layout.css — the page shell: header, footer, off-canvas, sections.
 *
 * THE LAYOUT IS A 16-COLUMN GRID: every page-level block (header bar,
 * page headers, section rows, footer) places its children on
 * repeat(16, 1fr) with the 20px gutter — the same grid Grid.Shift
 * composes the work collages on. Components arrange themselves freely
 * INSIDE their cell; the grid governs the page.
 *
 * Chrome values mirror live: 20px frame padding, 200px logo, 20px nav
 * (starting at column 8), search capped at 200px with a 1px black
 * underline. Small screens (≤1024px) swap the menu for the off-canvas
 * panel, coloured like the page.
 */

/* --- The 16-column scaffold --- */

.tek-cols {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: var(--tek-gap);
	padding: var(--tek-gap);
	align-items: start;
}

.tek-span-8 {
	grid-column: span 8;
}

@media (max-width: 1024px) {
	.tek-cols {
		grid-template-columns: 1fr;
	}

	.tek-span-8 {
		grid-column: auto;
	}
}

/* --- The frame --- */

.site-main {
	min-height: 60vh;
}

/* --- Header --- */

.site-header__bar {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: var(--tek-gap);
	align-items: center;
	padding: var(--tek-gap);
}

.site-branding {
	grid-column: 1 / 9;
}

.site-logo img {
	width: var(--tek-header-logo-width);
	height: auto;
}

/* Primary navigation starts at column 9 — the site's text axis
   (media sits 1–8, text from 9, across every page). It runs to 14 so
   the menu never wraps at narrow desktop widths; the search takes the
   last two columns and shrinks within its 200px cap. */
.site-navigation {
	grid-column: 9 / 15;
}

.primary-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Space AFTER each item only, so the first item ("About") sits flush
   on the column-9 line rather than 10px off it. The last item drops its
   trailing margin — it bought nothing and cost the menu 20px of width. */
.primary-menu .menu-item {
	margin: 0 var(--tek-gap) 0 0;
}

.primary-menu .menu-item:last-child {
	margin-right: 0;
}

.primary-menu a {
	white-space: nowrap;
}

.primary-menu a {
	color: var(--wp--preset--color--foreground);
}

.primary-menu a:hover,
.primary-menu a:focus,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_parent > a,
.primary-menu .current-page-ancestor > a {
	color: var(--tek-hover);
}

/* --- Search (header) --- */

.site-search {
	grid-column: 15 / 17;
	justify-self: end;
	width: 100%;
	max-width: 200px;
}

.search-form {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--foreground);
}

.search-form input[type="search"] {
	background: transparent;
	border: 0;
	width: 100%;
	min-width: 0;
	line-height: 1.3;
	padding: 0.1em 0;
	outline: none;
}

.search-form input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

.search-form .search-submit {
	display: grid;
	place-items: center;
	padding: 0.15em 0.3em;
}

.search-form .search-submit svg {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus {
	color: var(--tek-hover);
}

/* --- The burger + off-canvas (≤1024px) --- */

.nav-toggle {
	display: none;
}

.nav-toggle__bars {
	display: grid;
	gap: 8px;
	width: 40px;
}

.nav-toggle__bars span {
	display: block;
	height: 3px;
	background: var(--wp--preset--color--foreground);
}

.offcanvas {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgb(0 0 0 / 0.25);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.offcanvas.is-open {
	opacity: 1;
}

.offcanvas__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 45%;
	min-width: 320px;
	background: var(--tek-page-color, var(--wp--preset--color--background));
	transform: translateX(100%);
	transition: transform 0.3s ease-in-out;
	padding: 100px var(--tek-gap) var(--tek-gap);
	overflow-y: auto;
}

.offcanvas.is-open .offcanvas__panel {
	transform: translateX(0);
}

.offcanvas__close {
	position: absolute;
	top: 40px;
	right: 20px;
	width: 50px;
	height: 50px;
}

.offcanvas__close span::before,
.offcanvas__close span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 20%;
	width: 60%;
	height: 1px;
	background: var(--wp--preset--color--foreground);
}

.offcanvas__close span::before {
	transform: rotate(45deg);
}

.offcanvas__close span::after {
	transform: rotate(-45deg);
}

.offcanvas-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.offcanvas-menu li {
	padding: 2px 0;
}

.offcanvas-menu a {
	font-size: 36px;
	color: var(--wp--preset--color--foreground);
}

.offcanvas-menu a:hover,
.offcanvas-menu a:focus {
	color: var(--tek-hover);
}

body.offcanvas-open {
	overflow: hidden;
}

/* The menu needs ~380px on one line; below this the nav track is
   narrower than that, so the header switches to the burger here rather
   than at the content breakpoint. */
@media (max-width: 1100px) {
	.site-header__bar {
		display: flex;
		justify-content: space-between;
	}

	.site-navigation,
	.site-search {
		display: none;
	}

	.nav-toggle {
		display: block;
	}
}

@media (max-width: 767px) {
	.offcanvas__panel {
		width: 100%;
		min-width: 0;
	}
}

/* --- Footer --- */

.site-footer {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: var(--tek-gap);
	align-items: center;
	padding: var(--tek-gap);
	padding-bottom: calc(var(--tek-gap) / 2);
}

.site-footer__icons,
.site-footer__copyright {
	grid-column: 1 / 9;
}

.site-footer__credit {
	grid-column: 9 / 17;
	justify-self: end;
}

@media (max-width: 767px) {
	.site-footer {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
}

.site-footer__icons {
	display: flex;
	align-items: center;
	gap: var(--tek-gap);
}

.footer-icon {
	display: inline-grid;
	place-items: center;
	color: var(--wp--preset--color--foreground);
}

.footer-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.footer-icon:hover,
.footer-icon:focus {
	color: var(--tek-hover);
}

.site-footer__copyright,
.site-footer__credit {
	margin: 0;
}

.site-footer__credit a {
	color: var(--wp--preset--color--foreground);
}

.site-footer__credit a:hover {
	color: var(--tek-hover);
}

/* --- Page scaffolding --- */

.page-title {
	color: var(--wp--preset--color--background);
	margin: 0;
}

.page-header {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: var(--tek-gap);
	padding: var(--tek-gap);
}

.page-header .page-title {
	grid-column: 1 / 17;
}

/* Sub-navigation: left-aligned on its own row below the page title. */
.page-header .sub-navigation {
	grid-column: 1 / 17;
}

.sub-navigation ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: calc(var(--tek-gap) / 2) var(--tek-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sub-navigation a {
	color: var(--wp--preset--color--foreground);
}

.sub-navigation a:hover,
.sub-navigation a:focus,
.sub-navigation .current-menu-item > a,
.sub-navigation .is-current > a {
	color: var(--tek-hover);
}

/* --- Sections (templates write these, components fill them) --- */

.tek-section {
	padding: var(--tek-gap);
}

.tek-section--flush {
	padding: 0;
}

/* A content measure for prose. */
.tek-prose {
	max-width: var(--tek-measure);
}

/* --- About: the live composition on the 16-column grid, two keylined
 * sections ---
 *
 *   ── keyline ──  portrait 1–8 | bio 9–14, press 9–12 below it
 *   ── keyline ──  contact 1–4  | closing photo 9–16
 */

.tek-about__grid {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: 40px 20px;
	margin: 0 20px;
	border-top: 1px solid var(--wp--preset--color--foreground);
	padding: 20px 0 80px;
}

.tek-about__grid--contact {
	padding-bottom: 20px;
}

/* The portrait spans both rows of the first section, so Selected Press
   sits DIRECTLY below the bio in the right column — never pushed down
   to clear the image. Row 1 is sized by the bio (the 1fr second row
   absorbs whatever extra height the portrait needs). */
.tek-about__grid:not(.tek-about__grid--contact) {
	grid-template-rows: auto 1fr;
}

.tek-about__portrait {
	grid-column: 1 / 9;
	grid-row: 1 / span 2;
	margin: 0;
}

.tek-about__portrait img,
.tek-about__photo img {
	width: 100%;
	height: auto;
}

.tek-about__bio {
	grid-column: 9 / 16;
	grid-row: 1;
}

.tek-about__heading {
	color: var(--wp--preset--color--background);
	font-size: 30px;
	margin: 0 0 25px;
}

.tek-about__contact {
	grid-column: 1 / 5;
}

.tek-about__press {
	grid-column: 9 / 13;
	grid-row: 2;
	align-self: start;
	/* Its own keyline, opening the press block under the bio. */
	border-top: 1px solid var(--wp--preset--color--foreground);
	padding-top: 20px;
}

.tek-about__press-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tek-about__press-list li {
	padding-bottom: 10px;
}

.tek-about__press-list a {
	color: var(--wp--preset--color--foreground);
}

.tek-about__press-list a:hover {
	color: var(--tek-hover);
}

.tek-about__photo {
	grid-column: 9 / 17;
	grid-row: 1;
	margin: 0;
}

@media (max-width: 1024px) {
	.tek-about__grid,
	.tek-about__grid:not(.tek-about__grid--contact) {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.tek-about__portrait,
	.tek-about__bio,
	.tek-about__contact,
	.tek-about__press,
	.tek-about__photo {
		grid-column: auto;
		grid-row: auto;
	}
}

/* --- Rows wrapper: the loop pages (talks, books, news, search) --- */

.tek-rows {
	display: flex;
	flex-direction: column;
}

/* --- Singles (posts, resources) — on the grid: title across, image
   columns 1–8, the reading column on the col-9 axis. Without an image
   the text keeps its place. --- */

.tek-single {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: var(--tek-gap);
	padding: var(--tek-gap);
	align-items: start;
}

.tek-single .entry-header {
	grid-column: 1 / 17;
}

.tek-single .entry-title {
	color: var(--wp--preset--color--background);
}

.tek-single .entry-date {
	margin: 0;
}

.tek-single .entry-featured-image {
	grid-column: 1 / 9;
	margin: 0;
}

.tek-single .entry-featured-image img {
	width: 100%;
	height: auto;
}

.tek-single .entry-content {
	grid-column: 9 / 15;
	min-width: 0;
}

@media (max-width: 1024px) {
	.tek-single {
		grid-template-columns: 1fr;
	}

	.tek-single .entry-header,
	.tek-single .entry-featured-image,
	.tek-single .entry-content {
		grid-column: auto;
	}
}

/* --- Buttons --- */

/* Live's ghost button: 1px white outline, white text, 20px/40px
   padding, inverting on hover. Every surface is coloured (a white body
   anywhere is a bug), so white ink always reads. */
.tek-button {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--background);
	color: var(--wp--preset--color--background);
	padding: 20px 40px;
	line-height: 1;
	transition: background 0.2s ease, color 0.2s ease;
}

.tek-button:hover,
.tek-button:focus {
	background: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

/* --- Calendar --- */

.tek-calendar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
}

.tek-calendar__section {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: 20px;
	/* Cells stretch the row so the sticky Past heading has track to travel. */
	border-top: 1px solid var(--wp--preset--color--foreground);
	padding-bottom: 80px;
}

.tek-calendar__label {
	grid-column: 1 / 5;
}

.tek-calendar__rows {
	grid-column: 5 / 17;
	min-width: 0;
	padding-top: 10px;
}

.tek-calendar__heading {
	color: var(--wp--preset--color--background);
	font-size: 30px;
	margin: 20px 0 25px;
}

@media (min-width: 1025px) {
	.tek-calendar__heading--sticky {
		position: sticky;
		top: 20px;
	}
}

@media (max-width: 1024px) {
	.tek-calendar__section {
		grid-template-columns: 1fr;
	}

	.tek-calendar__label,
	.tek-calendar__rows {
		grid-column: auto;
	}
}

/* --- Single work --- */

.tek-work__hero {
	position: relative;
	min-height: calc(100vh - 86px);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	/* Live frames the hero with a SOLID page-colour border — an opaque
	   frame over the cover image (a transparent border would let the
	   background bleed through to the edges). */
	border: 0 solid var(--tek-page-color, var(--wp--preset--color--background));
	border-width: 0 20px 20px;
}

.tek-work__body {
	padding: 20px;
}

.tek-work__section {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: 20px;
	border-top: 1px solid var(--wp--preset--color--foreground);
	padding: 20px 0 40px;
}

.tek-work__section--intro {
	border-top: 0;
	padding-top: 0;
	min-height: 300px;
}

/* Two cells split the grid 8/8; label + list rows sit 4/12; the
   reviews column is 4 wide on the axis, over the credits column. */
.tek-work__cell {
	grid-column: span 8;
	min-width: 0;
}

.tek-work__cell--reviews {
	grid-column: 9 / 13;
}

.tek-work__cell--label {
	grid-column: 1 / 5;
}

.tek-work__cell--wide {
	grid-column: 5 / 17;
}

.tek-work__cell--split {
	display: flex;
	gap: 20px;
}

.tek-work__subcell {
	flex: 1 1 0;
	min-width: 0;
}

.tek-work__title {
	color: var(--wp--preset--color--background);
	max-width: 90%;
	margin: 0 0 25px;
}

.tek-work__category {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1.9px;
	margin: 0 0 80px;
}

.tek-work__category a {
	color: var(--wp--preset--color--foreground);
}

.tek-work__category a:hover {
	color: var(--tek-hover);
}

.tek-work__heading {
	color: var(--wp--preset--color--background);
	font-size: 30px;
	margin: 0 0 25px;
}

.tek-work__reviews,
.tek-work__credits,
.tek-work__awards {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tek-work__reviews li,
.tek-work__credits li,
.tek-work__awards li {
	padding-bottom: 20px;
}

.tek-work__review-quote {
	display: block;
	font-style: italic;
}

.tek-work__review-source,
.tek-work__credit-role {
	display: block;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1.9px;
}

.tek-work__award-year {
	display: block;
	font-size: 14px;
	letter-spacing: 1.9px;
}

.tek-work__credit-name,
.tek-work__award-name {
	display: block;
}

.tek-work__overview {
	max-width: 90%;
}

/* The description opens loud: first paragraph at 30px/1.3 — live's
   treatment, shared with the About bio. */
.tek-work__overview > p:first-child,
.tek-about__bio > p:first-child {
	font-size: 30px;
	line-height: 1.3;
}

.tek-work__commissioning {
	max-width: 90%;
	margin-top: 20px;
}

@media (max-width: 1024px) {
	.tek-work__section {
		grid-template-columns: 1fr;
	}

	.tek-work__cell,
	.tek-work__cell--label,
	.tek-work__cell--wide {
		grid-column: auto;
	}

	.tek-work__cell--split {
		flex-direction: column;
	}

	.tek-work__hero {
		min-height: 60vh;
	}

	.tek-work__category {
		margin-bottom: 40px;
	}
}

/* --- The landing page (chromeless) --- */

body.tek-landing {
	overflow: hidden;
}

.tek-landing__stage {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tek-landing__logo {
	position: relative;
	z-index: 1;
	width: 50%;
}

.tek-landing__logo img {
	width: 100%;
	height: auto;
}

/* --- The 16-unit grid Grid.Shift drives --- */

#gridshift {
	padding: var(--tek-gap);
	padding-top: 0;
}

.tek-grid {
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: var(--tek-gap);
}

/* Grid.Shift injects the per-row column spans; these are the fallbacks
   when a page has no layout (automatic flow, three across). */
.tek-grid > .tek-grid__item {
	grid-column: span 16;
}

@supports (container-type: inline-size) {
	.tek-grid__item {
		container: gs-item / inline-size;
	}
}