/* ============================================================
   Fonts (unlayered)
   ============================================================ */
@font-face {
	font-family: "nunito_bold";
	src: local("Nunito Bold"), url("fonts/nunito_bold.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "lato";
	src: local("Lato"), url("fonts/lato.ttf") format("truetype");
	font-display: swap;
}

@layer reset, tokens, base, layout, components, utilities, print;

/* ============================================================
   @layer reset
   ============================================================ */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	* {
		margin: 0;
	}
	html {
		-webkit-text-size-adjust: 100%;
	}
	body {
		min-height: 100vh;
		line-height: 1.5;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	img,
	picture,
	svg {
		display: block;
		max-width: 100%;
	}
	ul[class],
	ol[class] {
		list-style: none;
		padding: 0;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	button {
		font: inherit;
		color: inherit;
		background: none;
		border: none;
		cursor: pointer;
	}
	:focus-visible {
		outline: 3px solid var(--color-focus);
		outline-offset: 2px;
		border-radius: 3px;
	}
}

/* ============================================================
   @layer tokens
   ============================================================ */
@layer tokens {
	:root {
		/* palette */
		--color-bg: #ffffff;
		--color-surface: #ffffff;
		--color-surface-2: #f7f8fa;
		--color-ink: #1f2430;
		--color-ink-soft: #51596b;
		--color-line: #e6e8ee;
		--color-dark: #212836;
		/* light orange brand for fills/large accents only (poor contrast as text) */
		--color-brand: #ffab6e;
		/* accessible brand for links/small text on white (AA on #fff) */
		--color-brand-strong: #b3540f;
		--color-focus: #2563eb;

		/* type */
		--font-sans: "lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		--font-head: "nunito_bold", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

		--fs-xs: 0.78rem;
		--fs-sm: 0.9rem;
		--fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
		--fs-h3: clamp(1.05rem, 1rem + 0.5vw, 1.2rem);
		--fs-h2: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
		--fs-h1: clamp(1.85rem, 1.4rem + 2vw, 2.6rem);

		/* spacing */
		--space-2xs: 0.25rem;
		--space-xs: 0.5rem;
		--space-sm: 0.75rem;
		--space-md: 1rem;
		--space-lg: clamp(1.25rem, 1rem + 1vw, 1.75rem);
		--space-xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);

		--radius: 10px;
		--radius-sm: 6px;
		--measure: 70ch;
		--page-max: 920px;
	}

	@supports (color: oklch(0.5 0.1 30)) {
		:root {
			--color-brand: oklch(0.79 0.13 55);
			--color-brand-strong: oklch(0.53 0.16 47);
		}
	}
}

/* ============================================================
   @layer base
   ============================================================ */
@layer base {
	body {
		font-family: var(--font-sans);
		font-size: var(--fs-base);
		color: var(--color-ink);
		background: var(--color-bg);
	}

	h1,
	h2,
	h3,
	h4 {
		font-family: var(--font-head);
		line-height: 1.15;
		color: var(--color-ink);
		text-wrap: balance;
	}
	h1 {
		font-size: var(--fs-h1);
	}
	h2 {
		font-size: var(--fs-h2);
	}
	h3 {
		font-size: var(--fs-h3);
	}

	p {
		text-wrap: pretty;
	}

	a:not([class]) {
		color: var(--color-brand-strong);
		text-decoration: underline;
		text-underline-offset: 2px;
	}
	a:not([class]):hover {
		text-decoration: none;
	}

	/* inline icons scale with text */
	svg {
		width: 1em;
		height: 1em;
		fill: currentColor;
		flex: 0 0 auto;
	}
}

/* ============================================================
   @layer layout
   ============================================================ */
@layer layout {
	.page {
		width: 100%;
		max-width: var(--page-max);
		margin-inline: auto;
		padding-inline: clamp(1rem, 4vw, 2.5rem);
	}

	main {
		padding-block-end: var(--space-xl);
	}

	.section {
		margin-block-start: var(--space-xl);
		container-type: inline-size;
	}
}

/* ============================================================
   @layer components
   ============================================================ */
@layer components {
	/* ---- skip link ---- */
	.skip-link {
		position: absolute;
		left: -9999px;
		top: 0;
		background: var(--color-dark);
		color: #fff;
		padding: var(--space-xs) var(--space-md);
		border-radius: 0 0 var(--radius-sm) 0;
		z-index: 200;
	}
	.skip-link:focus {
		left: 0;
	}

	/* ---- masthead / contact block ---- */
	.masthead {
		padding-block: var(--space-xl) var(--space-md);
		border-bottom: 2px solid var(--color-line);
	}
	.masthead-id {
		display: grid;
		gap: var(--space-md);
		align-items: center;
	}
	.masthead-id:has(.avatar) {
		grid-template-columns: auto 1fr;
	}
	.avatar {
		width: clamp(64px, 10vw, 92px);
		height: clamp(64px, 10vw, 92px);
		border-radius: 50%;
		object-fit: cover;
		border: 2px solid var(--color-line);
	}
	.name {
		font-size: var(--fs-h1);
		letter-spacing: 0.3px;
	}
	.target-title {
		font-family: var(--font-head);
		font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
		color: var(--color-brand-strong);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		margin-top: 2px;
	}
	.tagline {
		color: var(--color-ink-soft);
		font-size: var(--fs-sm);
		margin-top: var(--space-2xs);
	}

	.contact-bar {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xs) var(--space-md);
		margin-top: var(--space-md);
		font-size: var(--fs-sm);
	}
	.contact-bar li {
		display: inline-flex;
	}
	.contact-bar a,
	.contact-bar span {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		color: var(--color-ink-soft);
	}
	.contact-bar a:hover {
		color: var(--color-brand-strong);
	}
	.contact-bar svg {
		color: var(--color-brand-strong);
	}

	.actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-xs);
		margin-top: var(--space-md);
	}

	/* ---- buttons + dropdown ---- */
	.btn {
		display: inline-flex;
		align-items: center;
		gap: 0.45em;
		padding: 0.55em 1em;
		border-radius: var(--radius-sm);
		border: 1px solid var(--color-line);
		background: var(--color-surface);
		color: var(--color-ink);
		font-family: var(--font-head);
		font-size: var(--fs-sm);
		transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	}
	.btn:hover {
		transform: translateY(-1px);
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
	}
	.btn-primary {
		background: var(--color-dark);
		color: #fff;
		border-color: var(--color-dark);
	}
	.dropdown {
		position: relative;
	}
	.dropdown-menu {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		min-width: 250px;
		background: var(--color-surface);
		border: 1px solid var(--color-line);
		border-radius: var(--radius);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
		padding: 0.3rem;
		z-index: 50;
		display: none;
		flex-direction: column;
	}
	.dropdown.is-open .dropdown-menu {
		display: flex;
	}
	.dropdown-item {
		text-align: left;
		padding: 0.6rem 0.8rem;
		border-radius: var(--radius-sm);
		font-size: var(--fs-sm);
	}
	.dropdown-item:hover {
		background: var(--color-surface-2);
	}
	.dropdown-item small {
		display: block;
		color: var(--color-ink-soft);
		font-size: var(--fs-xs);
	}

	/* ---- section heading ---- */
	.section-title {
		display: flex;
		align-items: center;
		gap: 0.5em;
		font-size: var(--fs-h2);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		padding-bottom: var(--space-xs);
		border-bottom: 2px solid var(--color-line);
	}
	.section-title svg {
		color: var(--color-brand-strong);
		font-size: 0.85em;
	}

	/* ---- profile summary ---- */
	.summary-list {
		display: grid;
		gap: var(--space-xs);
		margin-top: var(--space-md);
	}
	.summary-list li {
		position: relative;
		padding-left: 1.4em;
		max-width: var(--measure);
	}
	.summary-list li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.62em;
		width: 0.5em;
		height: 0.5em;
		border-radius: 2px;
		background: var(--color-brand);
	}
	.summary-text {
		margin-top: var(--space-md);
		max-width: var(--measure);
		color: var(--color-ink-soft);
	}

	/* ---- experience / education ---- */
	.roles {
		display: grid;
		gap: var(--space-lg);
		margin-top: var(--space-md);
	}
	.role-header {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.role-title {
		font-size: var(--fs-h3);
	}
	.role-company {
		font-family: var(--font-head);
		color: var(--color-brand-strong);
		font-size: var(--fs-sm);
	}
	.role-period {
		color: var(--color-ink-soft);
		font-size: var(--fs-sm);
		font-variant-numeric: tabular-nums;
	}
	.role-period .duration {
		color: var(--color-ink-soft);
		opacity: 0.8;
	}
	.tech-list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
		margin-top: var(--space-xs);
	}
	.tech-list li {
		font-size: var(--fs-xs);
		color: var(--color-ink-soft);
		border: 1px dashed var(--color-line);
		border-radius: 4px;
		padding: 0.05em 0.5em;
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	}
	.bullets {
		display: grid;
		gap: var(--space-2xs);
		margin-top: var(--space-sm);
	}
	.bullets li {
		position: relative;
		padding-left: 1.3em;
		max-width: var(--measure);
	}
	.bullets li::before {
		content: "";
		position: absolute;
		left: 0.1em;
		top: 0.62em;
		width: 0.4em;
		height: 0.4em;
		border-radius: 50%;
		background: var(--color-brand-strong);
	}
	.role-brief {
		margin-top: var(--space-sm);
		max-width: var(--measure);
		color: var(--color-ink-soft);
	}
	.case-link {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		margin-top: var(--space-sm);
		font-family: var(--font-head);
		font-size: var(--fs-sm);
		color: var(--color-brand-strong);
	}
	.case-link:hover {
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	@container (min-width: 560px) {
		.role-header {
			flex-direction: row;
			justify-content: space-between;
			align-items: baseline;
			gap: var(--space-md);
		}
		.role-period {
			text-align: right;
			white-space: nowrap;
		}
	}

	/* ---- skills ---- */
	.skill-groups {
		display: grid;
		gap: var(--space-md);
		margin-top: var(--space-md);
	}
	/* Flat chip list (profiles without skillGroups, e.g. Sanae) */
	#skills > .chips {
		margin-top: var(--space-md);
	}
	@container (min-width: 560px) {
		.skill-groups {
			grid-template-columns: 1fr 1fr;
			gap: var(--space-md) var(--space-lg);
		}
	}
	.skill-cat {
		font-size: var(--fs-sm);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		color: var(--color-ink-soft);
		margin-bottom: var(--space-xs);
	}
	.chips {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs);
	}
	.chips li {
		font-size: var(--fs-sm);
		background: var(--color-surface-2);
		border: 1px solid var(--color-line);
		border-radius: 999px;
		padding: 0.2em 0.7em;
	}
	.skill-group:has(.chips:empty) {
		display: none;
	}

	/* ---- projects ---- */
	.projects {
		display: grid;
		gap: var(--space-md);
		margin-top: var(--space-md);
	}
	@container (min-width: 560px) {
		.projects {
			grid-template-columns: 1fr 1fr;
		}
	}
	.project {
		border: 1px solid var(--color-line);
		border-radius: var(--radius);
		padding: var(--space-md);
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	.project:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
	}
	.project h3 {
		font-size: var(--fs-h3);
	}
	.project h3 a {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		color: var(--color-brand-strong);
	}
	.project h3 a:hover {
		text-decoration: underline;
		text-underline-offset: 2px;
	}
	.project p {
		margin-top: var(--space-2xs);
		color: var(--color-ink-soft);
		font-size: var(--fs-sm);
	}

	.muted {
		margin-top: var(--space-md);
		color: var(--color-ink-soft);
		font-style: italic;
	}

	/* ---- footer / contact ---- */
	.site-footer {
		margin-top: var(--space-xl);
		padding-block: var(--space-lg) var(--space-xl);
	}
	.footer-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-sm) var(--space-lg);
		margin-top: var(--space-md);
	}
	.footer-links a {
		display: inline-flex;
		align-items: center;
		gap: 0.45em;
		color: var(--color-brand-strong);
		font-family: var(--font-head);
		font-size: var(--fs-sm);
	}
	.footer-links a:hover {
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	/* ---- case study page ---- */
	.breadcrumbs {
		padding-top: var(--space-lg);
		font-size: var(--fs-sm);
	}
	.breadcrumbs a {
		display: inline-flex;
		align-items: center;
		gap: 0.35em;
		color: var(--color-brand-strong);
	}
	.case-study-page {
		padding-block: var(--space-lg) var(--space-xl);
	}
	.case-study-page .eyebrow {
		font-family: var(--font-head);
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--color-brand-strong);
		font-size: var(--fs-xs);
	}
	.case-study-page h1 {
		margin-top: var(--space-2xs);
		max-width: var(--measure);
	}
	.case-study-page .lead {
		margin-top: var(--space-sm);
		max-width: var(--measure);
		color: var(--color-ink-soft);
		font-size: var(--fs-h3);
	}
	.case-study-page section {
		margin-top: var(--space-lg);
	}
	.case-study-page section h2 {
		font-size: var(--fs-h3);
		text-transform: uppercase;
		letter-spacing: 0.06em;
	}
	.case-study-page section p {
		margin-top: var(--space-xs);
		max-width: var(--measure);
	}

	/* ---- job bot page ---- */
	.bot-page {
		min-height: 100vh;
		background: var(--color-dark);
		display: grid;
		place-items: center;
		padding: var(--space-lg);
	}
	.bot-form {
		width: min(600px, 100%);
		display: grid;
		gap: var(--space-sm);
	}
	.bot-title {
		color: #fff;
		text-align: center;
		margin-bottom: var(--space-sm);
	}
	.bot-form label {
		color: #fff;
		font-size: var(--fs-sm);
	}
	.bot-input {
		width: 100%;
		padding: 0.6rem 0.7rem;
		font: inherit;
		background: #fff;
		color: var(--color-ink);
		border: 1px solid #ccc;
		border-radius: var(--radius-sm);
	}
	.bot-send {
		justify-self: start;
		background: #0056b3;
		color: #fff;
		padding: 0.6rem 1.2rem;
		border-radius: var(--radius-sm);
	}
	.bot-send:hover {
		background: #004799;
	}
	.bot-status {
		color: #fff;
		min-height: 1.2em;
	}
}

/* ============================================================
   @layer utilities
   ============================================================ */
@layer utilities {
	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   @layer print  (A4, system fonts -> small text-selectable PDF)
   ============================================================ */
@layer print {
	@media print {
		@page {
			size: A4;
			margin: 14mm;
		}
		:root {
			--fs-base: 10.5pt;
			--fs-sm: 9.5pt;
			--fs-xs: 8.5pt;
			--fs-h1: 20pt;
			--fs-h2: 12pt;
			--fs-h3: 11pt;
		}
		/* Force system fonts everywhere so NO webfont (Lato/Nunito) is embedded
		   into the PDF — keeps the export small and text fully selectable. */
		*,
		*::before,
		*::after {
			font-family: inherit;
		}
		body {
			font-family: Georgia, "Times New Roman", Cambria, serif;
			color: #000;
			background: #fff;
		}
		h1,
		h2,
		h3,
		h4,
		.target-title,
		.role-title,
		.role-company,
		.section-title,
		.name {
			font-family: "Helvetica Neue", Arial, sans-serif;
		}
		.page {
			max-width: none;
			padding-inline: 0;
		}
		/* Neutralize screen-only sizing that wastes paper / forces extra pages */
		body {
			min-height: 0;
		}
		main {
			padding-block-end: 0;
		}
		a {
			color: #000 !important;
			text-decoration: none;
		}
		/* hide interactive / non-print chrome */
		.actions,
		.skip-link,
		.case-link,
		.dropdown {
			display: none !important;
		}
		.section {
			margin-block-start: 12pt;
		}
		/* Keep atomic blocks together, but let big sections flow across pages
		   so a section never gets pushed wholesale onto a fresh page. */
		.role,
		.summary-list li,
		.bullets li,
		.project,
		.edu-item {
			break-inside: avoid;
		}
		.section-title {
			color: #000;
			border-bottom: 1px solid #000;
			break-after: avoid;
		}
		.section-title svg,
		.contact-bar svg {
			color: #000;
			fill: #000;
		}
		.summary-list li::before {
			background: #000;
		}
		.bullets li::before {
			background: #000;
		}
		.target-title,
		.role-company,
		.contact-bar a,
		.contact-bar span,
		.project h3 a,
		.footer-links a {
			color: #000 !important;
		}
		.masthead {
			padding-block: 0 8pt;
			border-bottom: 1.5px solid #000;
		}
	}

	/* ----- One-page (A4): only masthead stylized; rest = title/subtitle/desc/bullets ----- */
	@media print {
		@page {
			margin: 10mm 12mm;
		}
		html.print-onepage :root,
		html.print-onepage {
			--fs-base: 8.2pt;
			--fs-sm: 7.6pt;
			--fs-xs: 7.1pt;
			--fs-h1: 15pt;
			--fs-h2: 10pt;
			--fs-h3: 9.2pt;
			line-height: 1.18;
		}
		html.print-onepage #projects,
		html.print-onepage #opensource,
		html.print-onepage .tech-list,
		html.print-onepage .site-footer {
			display: none !important;
		}
		/* Keep only the most recent, highest-impact roles so the one-pager fits one A4 */
		html.print-onepage #experience .role:nth-of-type(n + 5) {
			display: none !important;
		}
		/* Cap bullets per role to the top 2; older roles get a single line */
		html.print-onepage #experience .bullets li:nth-child(n + 3) {
			display: none !important;
		}
		html.print-onepage #experience .role:nth-of-type(n + 3) .bullets li:nth-child(n + 2) {
			display: none !important;
		}
		/* Profile: keep the top 3 narrative bullets on paper */
		html.print-onepage .summary-list li:nth-child(n + 4) {
			display: none !important;
		}
		/* Skills become a dense multi-column block on paper */
		html.print-onepage .skill-groups {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			column-gap: 14pt;
			row-gap: 2pt;
			margin-top: 3pt;
		}
		html.print-onepage .skill-group {
			margin: 0;
		}
		html.print-onepage .skill-cat {
			margin-bottom: 1pt;
			font-size: var(--fs-xs);
		}
		html.print-onepage .chips {
			gap: 2pt;
		}
		html.print-onepage .chips li {
			padding: 0.04em 0.45em;
			border-radius: 3pt;
		}
		html.print-onepage .section {
			margin-block-start: 5pt;
		}
		html.print-onepage .section-title {
			margin-block-end: 2pt;
			padding-block-end: 1.5pt;
		}
		html.print-onepage .masthead {
			padding-block: 0 4pt;
		}
		html.print-onepage .roles {
			gap: 5pt;
		}
		html.print-onepage .role-head {
			margin-block-end: 1pt;
		}
		html.print-onepage .bullets,
		html.print-onepage .summary-list {
			gap: 0;
		}
		html.print-onepage .bullets li,
		html.print-onepage .summary-list li {
			margin-block-end: 0.5pt;
		}
		html.print-onepage .avatar {
			width: 58px;
			height: 58px;
		}
	}

	/* ----- Full version: keep the on-screen styling (already print-safe above) ----- */
	@media print {
		html.print-full #projects {
			display: none !important; /* links are meaningless on paper */
		}
	}
}