/* =============================================================
   Nikita Sharma — portfolio redesign
   Minimal editorial · sticky project sidebar · CSS-columns gallery
   Single stylesheet. No frameworks. Each HTML page is standalone.
   ============================================================= */

/* ---------- Fonts (local, relative to /css) ---------- */
@font-face {
	font-family: "Cormorant Garamond";
	src: url(../fonts/CormorantGaramond-VariableFont_wght.ttf) format("truetype");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Avenir-LT";
	src: url(../fonts/AvenirLTProLight.otf) format("opentype");
	font-weight: 300 500;
	font-style: normal;
	font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
	--ink: #171513;
	--soft: #4c463f;
	--muted: #9a938a;
	--faint: #c7c0b5;
	--line: #e8e3db;
	--bg: #ffffff;
	--bg-warm: #f7f5f1;
	--accent: #9c5b46;          /* used sparingly */
	--accent-deep: #7f452f;

	--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--sans: "Avenir-LT", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--pad: clamp(20px, 5vw, 64px);
	--gap: clamp(12px, 1.4vw, 20px);
	--header-h: 96px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Themes (toggled via [data-theme] on <html>) ---------- */
/* Dark mode — "Noir": near-black, images glow, warm copper accent. */
[data-theme="dark"] {
	--ink: #f3f0ea;
	--soft: #c2bbb0;
	--muted: #8b857b;
	--faint: #5c574f;
	--line: #2b2825;
	--bg: #131210;
	--bg-warm: #1c1a17;
	--accent: #dd8e63;
	--accent-deep: #c1764f;
}
[data-theme="dark"] .tile::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .to-top { background: rgba(20, 18, 16, 0.82); }

/* Sepia mode — "Atelier": warm cream paper, rounded soft-shadowed images. */
[data-theme="sepia"] {
	--ink: #3b332c;
	--soft: #6c6157;
	--muted: #a99c8d;
	--faint: #cabfae;
	--line: #e7ddcf;
	--bg: #f6f1e8;
	--bg-warm: #efe6d8;
	--accent: #b3754e;
	--accent-deep: #945d3a;
}
[data-theme="sepia"] .grid { column-gap: 22px; }
[data-theme="sepia"] .tile {
	margin-bottom: 22px;
	box-shadow: 0 16px 32px -20px rgba(59, 51, 44, 0.5);
}
[data-theme="sepia"] .tile::after { box-shadow: none; }

/* Smooth cross-fade when switching themes (skipped for reduced-motion). */
body, .site-header, .site-footer, .tile, .tile::after, .to-top {
	transition: background-color 0.45s var(--ease), color 0.45s var(--ease),
		border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	font-family: var(--sans);
	font-weight: 400;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.6;
	letter-spacing: 0.1px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.1; }

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ink);
	color: #fff;
	padding: 10px 16px;
	z-index: 300;
}
.skip-link:focus { left: 12px; top: 12px; }

::selection { background: var(--ink); color: #fff; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	padding: 22px var(--pad) 14px;
}
.bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.wordmark {
	font-family: var(--serif);
	font-size: clamp(22px, 3vw, 31px);
	font-weight: 600;
	letter-spacing: 0.22em;
	white-space: nowrap;
	color: var(--ink);
}
.role {
	margin-top: 8px;
	font-size: 11px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--muted);
}

/* right-side cluster: theme switch + nav */
.bar-end { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); }

/* theme switcher (light / sepia / dark swatches) */
.theme-switch { display: inline-flex; align-items: center; gap: 8px; }
.theme-switch button {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--line);
	padding: 0;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.theme-switch button[data-theme-set="light"] { background: #ffffff; }
.theme-switch button[data-theme-set="sepia"] { background: #e7d6bb; }
.theme-switch button[data-theme-set="dark"]  { background: #131210; }
.theme-switch button:hover { transform: scale(1.14); }
.theme-switch button[aria-pressed="true"] {
	box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}

/* primary nav */
.primary-nav ul { display: flex; gap: 30px; }
.primary-nav a {
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--soft);
	padding: 4px 0;
	position: relative;
	transition: color 0.3s var(--ease);
}
.primary-nav a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%;
	bottom: -2px;
	height: 1px;
	background: var(--ink);
	transition: right 0.35s var(--ease);
}
.primary-nav a:hover { color: var(--ink); }
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { right: 0; }
.primary-nav a[aria-current="page"] { color: var(--ink); }

.nav-toggle {
	display: none;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
}

/* ---------- Work layout (sidebar + gallery) ---------- */
.work {
	display: flex;
	align-items: flex-start;
	gap: clamp(24px, 4vw, 64px);
	padding: clamp(28px, 4vw, 52px) var(--pad) 0;
}
.projects {
	flex: 0 0 232px;
	position: sticky;
	top: calc(var(--header-h) + 28px);
}
.project { margin-bottom: 30px; }
.project-link {
	font-family: var(--serif);
	font-size: 23px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--ink);
	transition: color 0.3s var(--ease);
}
.project-link:hover { color: var(--accent); }
.project[aria-current="true"] .project-link {
	color: var(--accent);
}
.project[aria-current="true"] .project-link {
	display: inline-block;
}
.project[aria-current="true"] .project-link::after {
	content: "\00a0\2192";
	font-family: var(--sans);
	white-space: nowrap;
}
.project .years { margin-top: 6px; }
.project .years li { margin-top: 3px; }
.project .years a, .project .years span {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	transition: color 0.3s var(--ease);
}
.project .years a:hover { color: var(--accent); }
.project .years a.is-active { color: var(--ink); }

/* ---------- Gallery ---------- */
.gallery-wrap { flex: 1 1 auto; min-width: 0; padding-bottom: clamp(60px, 9vw, 120px); }

.gallery-section + .gallery-section { margin-top: clamp(40px, 5vw, 72px); }
.section-label {
	font-family: var(--serif);
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 6px;
	scroll-margin-top: calc(var(--header-h) + 24px);
}
.section-meta {
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 22px;
}

/* No-JS fallback: newspaper columns. site.js upgrades this to a true
   shortest-column masonry (.is-masonry) so rows never lock into a grid. */
.grid {
	column-count: 2;
	column-gap: var(--gap);
}
@media (min-width: 760px) { .grid { column-count: 3; } }
@media (min-width: 1400px) { .grid { column-count: 4; } }

/* JS masonry: equal-width flex columns, each packed independently. */
.grid.is-masonry {
	display: flex;
	align-items: flex-start;
	gap: var(--gap);
	column-count: initial;
}
.grid.is-masonry .grid-col {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}
.grid.is-masonry .tile { margin: 0; }
[data-theme="sepia"] .grid.is-masonry,
[data-theme="sepia"] .grid.is-masonry .grid-col { gap: 22px; }

.tile {
	display: block;
	width: 100%;
	margin: 0 0 var(--gap);
	padding: 0;
	break-inside: avoid;
	overflow: hidden;
	background: var(--bg-warm);
	cursor: zoom-in;
	position: relative;
	/* Varied heights so the masonry feels organic instead of locking
	   into aligned rows. The full image is always shown in the lightbox. */
	aspect-ratio: 4 / 5;
}
.tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.7s var(--ease), opacity 0.4s var(--ease);
	will-change: transform;
	backface-visibility: hidden;
}
.tile:hover img { transform: scale(1.045); opacity: 0.92; }

/* 7-step height cycle — coprime with the 2/3/4 column counts so
   adjacent columns don't line up row-to-row. */
.tile:nth-child(7n + 1) { aspect-ratio: 4 / 5.7; }
.tile:nth-child(7n + 2) { aspect-ratio: 4 / 4.3; }
.tile:nth-child(7n + 3) { aspect-ratio: 4 / 5.1; }
.tile:nth-child(7n + 4) { aspect-ratio: 4 / 4.7; }
.tile:nth-child(7n + 5) { aspect-ratio: 4 / 6.0; }
.tile:nth-child(7n + 6) { aspect-ratio: 4 / 4.5; }
.tile:nth-child(7n + 7) { aspect-ratio: 4 / 5.3; }
.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(23, 21, 19, 0.06);
	pointer-events: none;
}

/* ---------- Lightbox ---------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(18, 16, 14, 0.94);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lb-img {
	max-width: 90vw;
	max-height: 84vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
	user-select: none;
}
.lb-btn {
	position: absolute;
	color: #fff;
	opacity: 0.7;
	transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
	line-height: 1;
	z-index: 2;
}
.lb-btn:hover { opacity: 1; }
.lb-close { top: 22px; right: 26px; font-size: 30px; }
.lb-prev, .lb-next {
	top: 50%;
	transform: translateY(-50%);
	font-size: 52px;
	padding: 12px;
}
.lb-prev { left: clamp(8px, 3vw, 40px); }
.lb-next { right: clamp(8px, 3vw, 40px); }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }
.lb-counter {
	position: absolute;
	bottom: 22px;
	left: 0; right: 0;
	text-align: center;
	color: #fff;
	opacity: 0.6;
	font-size: 12px;
	letter-spacing: 0.22em;
}

/* ---------- Inner pages (about / contact) ---------- */
.inner {
	padding: clamp(36px, 6vw, 88px) var(--pad) clamp(60px, 9vw, 120px);
	max-width: 1200px;
	margin: 0 auto;
}
.split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
@media (min-width: 820px) {
	.split { grid-template-columns: 1fr 1fr; }
	.split.text-first .media { order: 2; }
}

.eyebrow {
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 18px;
}
.display {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(38px, 6vw, 72px);
	line-height: 1.02;
	letter-spacing: 0.005em;
	color: var(--ink);
	margin-bottom: 26px;
}
.display .light { color: var(--faint); display: block; }

.lede {
	font-family: var(--serif);
	font-size: clamp(20px, 2.4vw, 27px);
	line-height: 1.5;
	color: var(--ink);
	margin-bottom: 24px;
}
.prose p { color: var(--soft); font-size: 16.5px; line-height: 1.85; margin-bottom: 18px; }
.prose p strong, .prose p b { color: var(--ink); font-weight: 500; }
.tagline {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--soft);
}
.tagline b { letter-spacing: 0.14em; text-transform: uppercase; font-size: 11px; color: var(--muted); display: block; margin-bottom: 6px; }

.media img { width: 100%; height: auto; }
.media.framed img { box-shadow: 0 30px 70px -36px rgba(23, 21, 19, 0.5); }

/* contact links */
.contact-links { margin-top: 8px; }
.contact-links a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 18px;
	color: var(--soft);
	padding: 10px 0;
	transition: color 0.3s var(--ease);
}
.contact-links a:hover { color: var(--accent); }
.contact-links svg { width: 19px; height: 19px; flex: none; color: var(--accent); }
.contact-links li { border-bottom: 1px solid var(--line); }
.contact-links li:last-child { border-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--bg-warm);
	border-top: 1px solid var(--line);
	text-align: center;
	padding: clamp(48px, 7vw, 80px) var(--pad) 44px;
}
.site-footer nav ul { display: inline-flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.site-footer nav a {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
	transition: color 0.3s var(--ease);
}
.site-footer nav a:hover { color: var(--ink); }
.social { margin: 26px 0 18px; }
.social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--ink);
	color: #fff;
	transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.social a:hover { background: var(--accent); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }
.copyright { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }

/* ---------- Back to top ---------- */
.to-top {
	position: fixed;
	left: 18px; bottom: 16px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink);
	background: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 9px 16px;
	transition: color 0.3s var(--ease), border-color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.to-top .tt-arrow { font-size: 1.15em; line-height: 1; }
.to-top:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Responsive: tablet / mobile ---------- */
@media (max-width: 900px) {
	:root { --header-h: 78px; }

	/* nav becomes overlay */
	.nav-toggle { display: inline-block; }
	.primary-nav ul {
		position: fixed;
		inset: 0;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 14px;
		background: rgba(247, 245, 241, 0.985);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		transform: translateY(-100%);
		opacity: 0;
		visibility: hidden;
		transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), visibility 0.4s var(--ease);
		z-index: 110;
	}
	.primary-nav.is-open ul { transform: translateY(0); opacity: 1; visibility: visible; }
	.primary-nav.is-open .nav-toggle { position: fixed; right: var(--pad); top: 24px; z-index: 120; }
	.primary-nav a { font-family: var(--serif); font-size: 30px; letter-spacing: 0.04em; text-transform: none; }
	.primary-nav a::after { display: none; }

	/* sidebar becomes a horizontal project rail above the gallery */
	.work { flex-direction: column; gap: 22px; }
	.projects {
		position: static;
		flex: none;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 8px 22px;
		align-items: baseline;
		padding-bottom: 18px;
		border-bottom: 1px solid var(--line);
	}
	.project { margin-bottom: 0; display: flex; align-items: baseline; gap: 10px; }
	.project-link { font-size: 18px; }
	.project .years { margin-top: 0; display: inline-flex; gap: 12px; }
}

@media (max-width: 560px) {
	.primary-nav a { font-size: 26px; }
	.lb-prev, .lb-next { font-size: 40px; }
}