/*
Theme Name: Outwith Studio 2026
Theme URI: https://www.outwith.studio
Author: Outwith Studio
Description: File-tree / Miller-column theme for Outwith Studio. Black, white, and violet; DM Mono + DM Sans.
Version: 3.0.0
*/

/* =============================================================
   Tokens
   ============================================================= */
:root {
	--paper: #ffffff;
	--ink: #111111;
	--violet: #8577ff;
	--on-violet: #ffffff;
	--line: var(--ink);

	--font-mono: "DM Mono", ui-monospace, monospace;
	--font-sans: "DM Sans", system-ui, -apple-system, Arial, sans-serif;

	--sidebar-w: 15rem;
	--list-w: 18rem;
	--footer-h: 2.75rem;

	--border-w: 1px;
	--pad: 1rem;

	--base: 18px;
}

/* Lightning toggle → violet mode.
   Flip the accent to white-on-violet so every hover/active state
   (menu links, project links, tools) becomes a white background. */
:root.inverted {
	--paper: #8577ff;
	--ink: #ffffff;
	--violet: #ffffff;
	--on-violet: #8577ff;
}

/* =============================================================
   Reset-ish
   ============================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--base);
	line-height: 1.35;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--violet); color: var(--on-violet); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* =============================================================
   App shell — fixed sidebar + fixed footer, scrolling columns
   ============================================================= */
body {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.app {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
	border-top: var(--border-w) solid var(--line); /* optional top rule */
	border-top: 0;
}

/* -------- Sidebar (column 1) -------- */
.sidebar {
	flex: 0 0 var(--sidebar-w);
	width: var(--sidebar-w);
	display: flex;
	flex-direction: column;
	border-right: var(--border-w) solid var(--line);
	overflow-y: auto;
	background: var(--paper);
}

.sidebar-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: var(--border-w) solid var(--line);
}
.brand {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;
}
.brand:hover { text-decoration: none; }
.brand-logo { width: 2.75rem; height: auto; }

/* Hamburger — hidden on desktop, shown on mobile */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;
	color: var(--ink);
}
.menu-toggle-bars {
	display: block;
	width: 1.4rem;
}
.menu-toggle-bars span {
	display: block;
	height: 2px;
	background: currentColor;
	margin: 4px 0;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Project-list accordion header — hidden on desktop */
.list-toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: var(--pad);
	border-bottom: var(--border-w) solid var(--line);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ink);
	background: var(--paper);
}
.list-toggle-caret { transition: transform 0.2s ease; }

.blurb {
	margin: 0;
	padding: var(--pad);
	border-bottom: var(--border-w) solid var(--line);
	font-size: 1rem;
	line-height: 1.4;
}

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.menu-item + .menu-item .menu-link { border-top: 0; }
.menu-link {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.7rem var(--pad);
	border-bottom: var(--border-w) solid var(--line);
	font-size: 1.05rem;
	font-weight: 500;
}
.menu-link:hover {
	text-decoration: none;
	background: var(--violet);
	color: var(--on-violet);
}
.menu-item.is-active > .menu-link {
	background: var(--violet);
	color: var(--on-violet);
}
.ext-arrow { font-size: 0.85em; opacity: 0.7; }
.menu-empty { padding: var(--pad); }

/* -------- View region (columns 2–3) -------- */
.view {
	flex: 1 1 auto;
	display: flex;
	min-width: 0;
	min-height: 0;
}
.view.is-loading { cursor: progress; }

.col {
	min-height: 0;
	overflow-y: auto;
}

/* Project list (column 2) */
.col-list {
	flex: 0 0 var(--list-w);
	width: var(--list-w);
	border-right: var(--border-w) solid var(--line);
}
.project-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.project-link {
	display: block;
	padding: var(--pad);
	border-bottom: var(--border-w) solid var(--line);
	font-weight: 700;
	line-height: 1.25;
}
.project-link:hover {
	text-decoration: none;
	background: var(--violet);
	color: var(--on-violet);
}
.project-item.is-active > .project-link {
	background: var(--violet);
	color: var(--on-violet);
}

/* Detail / page (column 3) */
.col-detail,
.col-page {
	flex: 1 1 auto;
	min-width: 0;
}
.detail-inner,
.page-inner {
	padding: 1.5rem 1.75rem 4rem;
	max-width: 46rem;
}
.detail-empty {
	padding: 1.5rem 1.75rem;
	opacity: 0.5;
}

.detail-title {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 1.7rem;
	line-height: 1.15;
	margin: 0 0 0.6rem;
}
.detail-meta {
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}
.detail-meta a { text-decoration: underline; }

.detail-gallery {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.gallery-figure { margin: 0; }
.gallery-image { width: 100%; }
.gallery-figure figcaption {
	font-size: 0.85rem;
	margin-top: 0.4rem;
	opacity: 0.75;
}

/* -------- Reader typography (the_content) -------- */
.reader p { margin: 0 0 1em; }
.reader h2, .reader h3, .reader h4 { font-family: var(--font-mono); font-weight: 500; }
.reader a { text-decoration: underline; }
.reader a:hover { background: var(--violet); color: var(--on-violet); text-decoration: none; }
.reader img { margin: 1.25em 0; }
.reader ul, .reader ol { padding-left: 1.25em; }

.team { margin-top: 2.5rem; }
.team h3 { font-family: var(--font-mono); }
.team-member { margin-bottom: 1.5rem; }
.team-member h4 { margin: 0 0 0.25rem; }

/* -------- Hero (front page) -------- */
.col-hero {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero-sketch {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 0;
}
.hero-sketch canvas { display: block; }
.hero-text {
	position: relative;
	z-index: 1;
	margin: 0;
	text-align: center;
	font-family: var(--font-sans);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 0.92;
	text-transform: uppercase;
	font-size: clamp(3.5rem, 13vw, 11rem);
	pointer-events: none;
}
.hero-text span { display: block; }
.hero-text span:nth-child(2) { margin-left: 0.15em; }
.hero-text span:nth-child(3) { margin-left: 0.3em; }

/* =============================================================
   Footer (fixed, full width)
   ============================================================= */
.site-footer {
	flex: 0 0 auto;
	min-height: var(--footer-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 var(--pad);
	border-top: var(--border-w) solid var(--line);
	background: var(--paper);
	position: relative;
}
.footer-locations {
	font-size: 0.85rem;
}
.footer-tools {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink);
	line-height: 0;
}
.tool svg { fill: currentColor; }
.tool:hover { color: var(--violet); text-decoration: none; }

/* Search overlay */
.search-panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	padding: 1rem var(--pad);
	background: var(--ink);
	color: var(--paper);
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.search-panel[hidden] { display: none; }
.searchform {
	flex: 1 1 auto;
	display: flex;
	gap: 0.5rem;
	align-items: center;
}
.searchform .search-field {
	flex: 1 1 auto;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--paper);
	color: var(--paper);
	font: inherit;
	font-size: 1.25rem;
	padding: 0.25rem 0;
	outline: none;
}
.searchform .search-field::placeholder { color: rgba(255,255,255,0.5); }
.searchform .search-submit {
	color: var(--paper);
	border: 1px solid var(--paper);
	padding: 0.35rem 0.75rem;
	border-radius: 3px;
}
.searchform .search-submit:hover { background: var(--paper); color: var(--ink); }
.search-close {
	color: var(--paper);
	font-size: 1.5rem;
	line-height: 1;
}

/* Search results page (uses .col-page) */
.search-results-list { list-style: none; margin: 0; padding: 0; }
.search-results-list li { margin-bottom: 1rem; }

/* =============================================================
   Responsive — mobile (< 48em): sticky top bar + drawer menu,
   stacked columns, project-list accordion.
   ============================================================= */
@media (max-width: 48em) {

	body {
		overflow: auto;
		height: auto;
		min-height: 100dvh;
	}
	.app { flex-direction: column; }

	/* --- Sidebar becomes a sticky top bar with a drawer --- */
	.sidebar {
		flex: none;
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 20;
		border-right: 0;
		border-bottom: var(--border-w) solid var(--line);
		overflow: visible;            /* let the drawer overflow */
	}
	.sidebar-bar {
		justify-content: space-between;
	}
	.menu-toggle { display: flex; }

	.sidebar-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--paper);
		border-bottom: var(--border-w) solid var(--line);
		max-height: calc(100dvh - 4rem - var(--footer-h));
		overflow-y: auto;
		z-index: 20;
	}
	.sidebar.is-open .sidebar-nav { display: block; }

	/* Hamburger → X */
	.sidebar.is-open .menu-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.sidebar.is-open .menu-toggle-bars span:nth-child(2) { opacity: 0; }
	.sidebar.is-open .menu-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

	/* --- Columns stack and scroll with the page --- */
	.view { flex-direction: column; }
	.col { overflow: visible; }
	.col-list {
		flex: none;
		width: 100%;
		border-right: 0;
		border-bottom: var(--border-w) solid var(--line);
	}
	.col-hero { min-height: 70vh; }

	/* --- Project-list accordion ---
	   List is visible by default (/projects). Once a project is
	   selected, collapse to a tappable header; tapping re-expands. */
	.col-list.has-selection .list-toggle { display: flex; }
	.col-list.has-selection .project-list { display: none; }
	.col-list.has-selection.is-open .project-list { display: block; }
	.col-list.is-open .list-toggle-caret { transform: rotate(180deg); }

	/* Hide the empty "Select a project" detail on mobile */
	.col-detail:has(.detail-empty) { display: none; }

	/* --- Footer stays pinned --- */
	.site-footer {
		position: sticky;
		bottom: 0;
		z-index: 20;
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
	}
}