:root {
	--bg: #ffffff;
	--bg-alt: #f6f7f9;
	--text: #1a1d23;
	--muted: #4a5160;
	--border: #e2e5ea;
	--accent: #1d4ed8;
	--accent-soft: #e8efff;
	--radius: 12px;
	--maxw: 1150px;
	--nav-h: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
	html.js .reveal { opacity: 1; transform: none; }
}
body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--text);
	background: var(--bg);
	line-height: 1.6;
	font-size: 1rem;
}
a { color: var(--accent); }
a:focus-visible, button:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: 6px;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	background: var(--accent);
	color: #fff;
	padding: 8px 14px;
	border-radius: 6px;
	z-index: 100;
}
.skip-link:focus { left: 8px; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Nav */
header.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
}
.nav {
	height: var(--nav-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.brand { font-weight: 700; text-decoration: none; color: var(--text); letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
	display: block;
	padding: 8px 12px;
	text-decoration: none;
	color: var(--muted);
	font-weight: 500;
	border-radius: 8px;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); background: var(--accent-soft); }
.menu-btn {
	display: none;
	background: none;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 12px;
	font: inherit;
	cursor: pointer;
	color: var(--text);
}
@media (max-width: 720px) {
	.menu-btn { display: block; }
	.nav-links {
		display: none;
		position: absolute;
		top: var(--nav-h);
		left: 0;
		right: 0;
		flex-direction: column;
		background: var(--bg);
		border-bottom: 1px solid var(--border);
		padding: 8px 20px 16px;
	}
	.nav-links.open { display: flex; }
}

/* Sections */
section { padding: 88px 0; }
section + section { border-top: 1px solid var(--border); }
h2 { font-size: 1.9rem; margin: 0 0 32px; letter-spacing: -0.02em; font-weight: 600; }
.eyebrow {
	margin: 0 0 6px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
h3 { margin: 0; font-size: 1.1rem; }

/* Hero / About */
.hero > div { max-width: 760px; }
.hero.has-collage { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.hero-collage {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: repeat(6, 1fr);
	gap: 12px;
	aspect-ratio: 1 / 1.1;
}
.hero-collage[hidden] { display: none; }
.hero-collage .photo { overflow: hidden; border-radius: var(--radius); background: var(--accent-soft); }
.hero-collage .photo:nth-child(1) { grid-area: 1 / 1 / 5 / 5; }
.hero-collage .photo:nth-child(1) img { object-position: center 20%; }
.hero-collage .photo:nth-child(2) { grid-area: 1 / 5 / 3 / 7; }
.hero-collage .photo:nth-child(3) { grid-area: 3 / 5 / 5 / 7; }
.hero-collage .photo:nth-child(3) img { object-position: center 75%; }
.hero-collage .photo:nth-child(4) { grid-area: 5 / 1 / 7 / 4; }
.hero-collage .photo:nth-child(5) { grid-area: 5 / 4 / 7 / 7; }
.hero-collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-collage .photo:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
	.hero.has-collage { grid-template-columns: 1fr; gap: 36px; }
	.hero-collage { max-width: 460px; }
}

/* Fade-up as sections scroll into view */
html.js .reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 0; letter-spacing: -0.03em; line-height: 1.15; }
.hero h1 { margin-bottom: 20px; }
.intro p { font-size: 1.15rem; line-height: 1.7; margin: 0 0 14px; }
.intro strong { color: var(--accent); font-weight: 600; }
.facts { color: var(--muted); font-size: 0.92rem; margin: 22px 0 26px; }
.facts span + span::before { content: "·" / ""; margin: 0 10px; color: var(--muted); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--accent);
	font-size: 0.95rem;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #1e40af; }
.btn-outline { color: var(--accent); background: transparent; }
.btn-outline:hover { background: var(--accent-soft); }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }

/* Skills */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px 40px; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.value h3 { font-size: 1.15rem; margin-bottom: 4px; color: var(--accent); }
.value p { margin: 0; color: var(--muted); }
.skill-group { padding: 4px 0; }
.skill-group h3 { font-size: 1rem; margin-bottom: 12px; }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
	background: var(--accent-soft);
	color: #1e3a8a;
	font-size: 0.82rem;
	font-weight: 500;
	padding: 3px 10px;
	border-radius: 999px;
}

/* Experience timeline */
.exp-group-title {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin: 0 0 12px;
}
.exp-list { display: grid; gap: 18px; margin-bottom: 32px; }
.exp {
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px 22px;
}
.exp-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.meta { color: var(--muted); font-size: 0.9rem; }
.role { font-weight: 600; color: var(--accent); margin: 2px 0 10px; }
.points { margin: 0; padding-left: 20px; }
.points li { margin-bottom: 6px; }
.points strong { font-weight: 600; color: var(--text); }

/* Projects */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.card {
	display: flex;
	flex-direction: column;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: box-shadow 0.2s, transform 0.2s;
}
.card-media {
	aspect-ratio: 16 / 10;
	background: var(--accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	font-weight: 700;
	font-size: 1.6rem;
	letter-spacing: 0.04em;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; }
.card .summary { margin: 8px 0 12px; color: var(--muted); }
.card:hover { box-shadow: 0 8px 24px rgba(20, 30, 60, 0.08); transform: translateY(-2px); }
.card .subtitle { color: var(--muted); font-size: 0.85rem; margin: 2px 0 0; }
.card .tags { margin: 4px 0 10px; }
.placeholder-note { color: #9a3412; font-size: 0.85rem; font-style: italic; }

/* Contact */
.big-title { font-size: clamp(2.4rem, 7vw, 4rem); margin-bottom: 16px; }
.contact-lead { max-width: 560px; color: var(--muted); font-size: 1.1rem; margin: 0 0 32px; }
.contact-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 18px; }
.contact-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; font-size: clamp(1.1rem, 3vw, 1.5rem); }
.contact-list span { min-width: 110px; color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.contact-list a { font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; word-break: break-word; }
.contact-list a:hover { border-bottom-color: currentColor; }
footer { padding: 28px 0; text-align: center; color: var(--muted); font-size: 0.88rem; border-top: 1px solid var(--border); }

/* =========================================================
	THEME: Evergreen (applied by data-theme="evergreen" on <html>).
	Change colours in the [data-theme="evergreen"] block below.
========================================================= */
[data-theme] header.site-header { background: var(--nav-bg); }
[data-theme] .tag { background: var(--tag-bg); color: var(--tag-text); }
[data-theme] .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
[data-theme] .btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
[data-theme] .placeholder-note { color: var(--accent); }
[data-theme] .exp, [data-theme] .card { background: var(--card); }
[data-theme] .skip-link { color: var(--on-accent); }

/* E: Evergreen: warm off-white, deep forest green, amber only on key buttons */
[data-theme="evergreen"] {
	--bg: #fbfaf6;
	--bg-alt: #f2f1ea;
	--card: #ffffff;
	--text: #1b2a24;
	--muted: #4b5a53;
	--border: #dfe3dc;
	--accent: #1f5a45;
	--on-accent: #ffffff;
	--accent-soft: #e6efe9;
	--amber: #e9a83a;
	--on-amber: #2a1d06;
	--tag-bg: #e6efe9;
	--tag-text: #1a4a39;
	--nav-bg: rgba(251, 250, 246, 0.92);
	--radius: 10px;
}
[data-theme="evergreen"] body { font-family: "Inter", system-ui, sans-serif; }
[data-theme="evergreen"] h1, [data-theme="evergreen"] h2 { color: var(--text); letter-spacing: -0.025em; }
[data-theme="evergreen"] .eyebrow { color: var(--accent); }
[data-theme="evergreen"] .brand { color: var(--accent); }
[data-theme="evergreen"] .meta, [data-theme="evergreen"] .tag, [data-theme="evergreen"] .card .subtitle {
	font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
	font-size: 0.78rem;
}
[data-theme="evergreen"] .tag { border-radius: 5px; }
[data-theme="evergreen"] .btn-primary { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
[data-theme="evergreen"] .btn-primary:hover { background: #dc9a2a; filter: none; }
[data-theme="evergreen"] .btn-outline { color: var(--accent); border-color: var(--accent); }
[data-theme="evergreen"] .card:hover { box-shadow: 0 10px 26px rgba(31, 90, 69, 0.12); }
[data-theme="evergreen"] .placeholder-note { color: #8a5a0c; }

/* =========================================================
	PROJECT CARDS, PROJECTS PAGE, SINGLE PROJECT PAGE
========================================================= */
a.card-media { display: block; }
.card-title { color: var(--text); text-decoration: none; }
.card-title:hover { color: var(--accent); }
.learn-more {
	align-self: flex-start;
	margin-top: 4px;
	font-weight: 600;
	text-decoration: none;
	color: var(--accent);
}
.learn-more::after { content: " →" / ""; display: inline-block; transition: transform 0.2s; }
.learn-more:hover::after { transform: translateX(3px); }
.section-more { margin-top: 32px; }

.page-header { padding-bottom: 8px; }
.page-header h1, .project-title {
	font-size: clamp(2rem, 5vw, 2.8rem);
	margin: 0 0 12px;
	letter-spacing: -0.03em;
	line-height: 1.15;
}
.page-lead, .project-lead { max-width: 640px; color: var(--muted); font-size: 1.15rem; margin: 0 0 20px; }
.page-section { padding-top: 56px; }

.back-link {
	display: inline-block;
	margin-bottom: 28px;
	font-weight: 600;
	text-decoration: none;
}
.back-link::before { content: "← " / ""; }
.project-header .tags { margin-bottom: 20px; }

/* Project page: slideshow on the left, write-up on the right */
.project-layout { margin-top: 44px; }
.project-layout.has-photos {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
.project-layout.has-photos .project-section:first-child { margin-top: 0; }
.slideshow { position: sticky; top: calc(var(--nav-h) + 24px); }
.slides-frame { position: relative; }
.slides {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--card, var(--bg));
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
}
.slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0.45s;
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.slide-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.92);
	color: var(--text);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.slide-btn:hover { border-color: var(--accent); color: var(--accent); }
.slide-btn span { margin-top: -3px; }
.slide-prev { left: 12px; }
.slide-next { right: 12px; }
.slide-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.slide-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.slide-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	border: 0;
	background: var(--border);
	cursor: pointer;
}
.slide-dot[aria-current="true"] { background: var(--accent); }
.slides { cursor: zoom-in; }
.slide-expand {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.92);
	color: var(--text);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.slide-expand:hover { border-color: var(--accent); color: var(--accent); }

/* Full-screen photo viewer */
html.viewer-open { overflow: hidden; }
.viewer {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(12, 18, 16, 0.94);
	color: #fff;
}
.viewer::backdrop { background: rgba(12, 18, 16, 0.94); }
.viewer[open] { display: flex; flex-direction: column; }
.viewer-stage {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 72px 12px;
}
.viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }
.viewer-bar {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: 16px;
	padding: 8px 24px 22px;
	text-align: center;
}
.viewer-caption { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; max-width: 720px; }
.viewer-count { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }
.viewer-btn {
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.viewer-btn:hover { background: rgba(255, 255, 255, 0.2); }
.viewer-btn span { margin-top: -3px; }
.viewer-btn:focus-visible { outline: 3px solid var(--amber, #fff); outline-offset: 3px; }
.viewer-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.viewer-next { right: 16px; top: 50%; transform: translateY(-50%); }
.viewer-close { top: 12px; right: 16px; }
@media (max-width: 720px) {
	.viewer-stage { padding: 56px 8px 8px; }
	.viewer-prev, .viewer-next { top: auto; bottom: 16px; transform: none; }
}

.slide-count { color: var(--muted); font-size: 0.85rem; font-family: "JetBrains Mono", ui-monospace, Consolas, monospace; }
.slide-caption { color: var(--muted); font-size: 0.92rem; margin: 10px 0 0; }
@media (max-width: 900px) {
	.project-layout.has-photos { grid-template-columns: 1fr; gap: 32px; }
	.slideshow { position: static; }
}

.project-body { max-width: 760px; min-width: 0; }
.project-section { margin-top: 48px; }
.project-section h2 { font-size: 1.4rem; margin-bottom: 14px; }
.project-section p { font-size: 1.05rem; line-height: 1.75; margin: 0 0 14px; }
.project-section .points li { font-size: 1.05rem; line-height: 1.7; margin-bottom: 10px; }

.project-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 64px;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}
.project-pager a {
	display: block;
	padding: 16px 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--card, var(--bg));
	text-decoration: none;
	color: var(--text);
}
.project-pager a:hover { border-color: var(--accent); }
.project-pager span { display: block; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px; }
.project-pager strong { color: var(--accent); }
.pager-next { text-align: right; }
@media (max-width: 560px) {
	.project-pager { grid-template-columns: 1fr; }
	.pager-next { text-align: left; }
}

/* Resume button in the nav */
.nav-links a.nav-resume { border: 1.5px solid var(--accent); color: var(--accent); margin-left: 6px; }
.nav-links a.nav-resume:hover { background: var(--accent); color: #fff; }

/* Experience logos (like LinkedIn): set "logo" on an EXPERIENCE entry in js/data.js */
.exp.has-logo { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.exp-logo {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--border);
}
.exp-body { min-width: 0; }
@media (max-width: 520px) {
	.exp.has-logo { grid-template-columns: 44px 1fr; gap: 14px; }
	.exp-logo { width: 44px; height: 44px; border-radius: 8px; }
}

/* =========================================================
	THEME: iOS (data-theme="ios" on <html>).
	Grouped backgrounds, frosted nav, rounded cards, pill buttons,
	system blue accent, automatic dark mode.
========================================================= */
[data-theme="ios"] {
	--bg: #f2f2f7;
	--bg-alt: #f2f2f7;
	--card: #ffffff;
	--text: #1a1c20;
	--muted: #6e6e73;
	--border: rgba(60, 60, 67, 0.12);
	--accent: #2f6fdf;
	--on-accent: #ffffff;
	--accent-soft: rgba(47, 111, 223, 0.1);
	--tag-bg: rgba(118, 118, 128, 0.12);
	--tag-text: #3a3a3c;
	--nav-bg: rgba(249, 249, 249, 0.72);
	--radius: 16px;
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.05);
}
[data-theme="ios"][data-mode="dark"] {
	color-scheme: dark;
	--bg: #121316;
	--bg-alt: #121316;
	--card: #1e2024;
	--text: #ffffff;
	--muted: #98989f;
	--border: rgba(84, 84, 88, 0.5);
	--accent: #5b8ff0;
	--accent-soft: rgba(91, 143, 240, 0.18);
	--tag-bg: rgba(118, 118, 128, 0.24);
	--tag-text: #e5e5ea;
	--nav-bg: rgba(22, 22, 24, 0.72);
	--shadow: none;
}
[data-theme="ios"] body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
	letter-spacing: -0.01em;
}
[data-theme="ios"] h1, [data-theme="ios"] h2, [data-theme="ios"] .big-title {
	font-weight: 700;
	letter-spacing: -0.035em;
}
[data-theme="ios"] h2 { font-size: 2.1rem; }
[data-theme="ios"] .eyebrow { color: var(--muted); }
[data-theme="ios"] .brand { font-weight: 600; }

/* Frosted nav bar */
[data-theme="ios"] header.site-header {
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 0.5px solid var(--border);
}
[data-theme="ios"] .nav-links a { border-radius: 999px; padding: 6px 14px; }
[data-theme="ios"] .nav-links a:hover, [data-theme="ios"] .nav-links a.active { background: var(--accent-soft); color: var(--accent); }
[data-theme="ios"] .menu-btn { border-radius: 999px; background: var(--tag-bg); border: 0; color: var(--text); }
@media (max-width: 720px) {
	[data-theme="ios"] .nav-links {
		background: var(--card);
		border-radius: 16px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	}
}

/* Sections: no hairline dividers, more air */
[data-theme="ios"] section + section { border-top: 0; }
[data-theme="ios"] footer { border-top: 0; }

/* Cards: grouped inset style */
[data-theme="ios"] .exp, [data-theme="ios"] .card, [data-theme="ios"] .slides {
	background: var(--card);
	border: 0;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
[data-theme="ios"] .card { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s; }
[data-theme="ios"] .card:hover { transform: scale(1.015); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); }
[data-theme="ios"] .card:active { transform: scale(0.98); }
[data-theme="ios"] .hero-collage .photo { border-radius: 22px; }

/* Pill buttons */
[data-theme="ios"] .btn {
	border-radius: 999px;
	padding: 11px 22px;
	font-weight: 600;
	border: 0;
	transition: transform 0.15s, filter 0.15s, background 0.15s;
}
[data-theme="ios"] .btn:active { transform: scale(0.96); }
[data-theme="ios"] .btn-primary { background: var(--accent); color: var(--on-accent); }
[data-theme="ios"] .btn-primary:hover { filter: brightness(1.1); background: var(--accent); }
[data-theme="ios"] .btn-outline { background: var(--accent-soft); color: var(--accent); }
[data-theme="ios"] .btn-outline:hover { background: var(--accent-soft); filter: brightness(0.95); }

/* Tags: grey capsules */
[data-theme="ios"] .tag { border-radius: 999px; font-weight: 500; padding: 4px 12px; }
[data-theme="ios"] .role, [data-theme="ios"] .value h3 { color: var(--accent); }
[data-theme="ios"] .placeholder-note { color: #ff9500; }

/* Slideshow controls */
[data-theme="ios"] .slide-btn {
	border: 0;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: #000;
}
[data-theme="ios"] .slide-dot { width: 8px; height: 8px; background: rgba(120, 120, 128, 0.32); }
[data-theme="ios"] .slide-dot[aria-current="true"] { background: var(--text); }

/* Light/dark toggle button */
.nav { gap: 8px; }
.brand { margin-right: auto; }
.mode-btn {
	width: 36px; height: 36px; flex: none;
	border-radius: 999px; border: 0; cursor: pointer;
	background: var(--tag-bg, var(--accent-soft)); color: var(--text);
	font-size: 1.05rem; line-height: 1; display: grid; place-items: center;
	transition: transform 0.15s, background 0.2s;
}
.mode-btn:active { transform: scale(0.9); }
[data-mode="dark"] body, [data-mode="dark"] header.site-header { transition: background 0.3s, color 0.3s; }
[data-theme="ios"][data-mode="dark"] .slide-btn { background: rgba(44, 44, 46, 0.7); color: #fff; }
[data-theme="ios"][data-mode="dark"] .card:hover { box-shadow: none; }

/* =========================================================
	iOS, round 2: segmented nav, switch toggle, inset grouped lists
========================================================= */
[data-theme="ios"] { -webkit-tap-highlight-color: transparent; }
[data-theme="ios"] ::selection { background: var(--accent-soft); }

/* Large titles */
[data-theme="ios"] h2 { font-size: 2rem; font-weight: 700; margin-bottom: 24px; }
[data-theme="ios"] .hero h1, [data-theme="ios"] .page-header h1, [data-theme="ios"] .project-title { font-weight: 700; letter-spacing: -0.035em; }

/* Dark-mode button as an iOS switch */
[data-theme="ios"] .mode-btn {
	position: relative; width: 51px; height: 31px; padding: 0;
	border-radius: 999px; font-size: 0; color: transparent;
	background: rgba(120, 120, 128, 0.16);
	transition: background 0.25s;
}
[data-theme="ios"] .mode-btn::after {
	content: "☀︎" / ""; position: absolute; top: 2px; left: 2px;
	width: 27px; height: 27px; border-radius: 50%;
	background: #fff; color: #ff9500; font-size: 0.8rem;
	display: grid; place-items: center;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
	transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
[data-theme="ios"] .mode-btn[aria-pressed="true"] { background: var(--accent); }
[data-theme="ios"] .mode-btn[aria-pressed="true"]::after { content: "☾" / ""; color: var(--accent); transform: translateX(20px); }
[data-theme="ios"] .mode-btn:active { transform: none; }
[data-theme="ios"] .mode-btn:active::after { width: 33px; }
[data-theme="ios"] .mode-btn[aria-pressed="true"]:active::after { transform: translateX(14px); }

/* Experience cards: grouped rows feel */
[data-theme="ios"] .exp { border-radius: 14px; padding: 18px 20px; }
[data-theme="ios"] .exp-list { gap: 12px; }
[data-theme="ios"] .role { color: var(--muted); font-weight: 500; }
[data-theme="ios"] .points { padding-left: 18px; }
[data-theme="ios"] .points li::marker { color: var(--accent); }

/* Springy reveal animation */
[data-theme="ios"].js .reveal { transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1); transition-delay: var(--reveal-delay, 0s); }

/* Mobile menu as a popover sheet */
@media (max-width: 720px) {
	[data-theme="ios"] .nav-links {
		background: var(--nav-bg);
		backdrop-filter: saturate(180%) blur(24px);
		-webkit-backdrop-filter: saturate(180%) blur(24px);
		padding: 6px; border-radius: 14px;
	}
	[data-theme="ios"] .nav-links a { border-radius: 10px; color: var(--text); }
	[data-theme="ios"] .menu-btn { color: var(--accent); font-weight: 600; background: transparent; }
}

/* Waving hand in the hero greeting */
.wave {
	display: inline-block;
	transform-origin: 70% 70%;
	animation: wave 2.4s ease-in-out 0.6s 2;
	cursor: default;
}
.wave:hover { animation: wave-again 1.2s ease-in-out; }
@keyframes wave {
	0%, 60%, 100% { transform: rotate(0deg); }
	10%, 30% { transform: rotate(14deg); }
	20% { transform: rotate(-8deg); }
	40% { transform: rotate(-4deg); }
	50% { transform: rotate(10deg); }
}
@keyframes wave-again {
	0%, 60%, 100% { transform: rotate(0deg); }
	10%, 30% { transform: rotate(14deg); }
	20% { transform: rotate(-8deg); }
	40% { transform: rotate(-4deg); }
	50% { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) { .wave { animation: none; } }

/* Several roles at one organization */
.exp-role { margin-top: 12px; }
.exp-role + .exp-role { padding-top: 12px; border-top: 1px solid var(--border); }
.exp-role .exp-head { align-items: baseline; }
.exp-role .role { margin: 0 0 8px; }