/* Marlena Marszałek – Trenerka Nauczycieli */

:root {
	--paper: #fbfcfe;
	--grid: #e3ebf5;
	--ink: #1d2a44;
	--ink-soft: #465573;
	--muted: #6a7690;
	--red: #d1433f;
	--red-soft: #f7dcda;
	--board: #24463d;
	--board-ink: #eef4ef;
	--board-line: #3c6558;
	--card: #ffffff;
	--line: #d6e0ec;
	--focus: #d1433f;

	--display: "Literata", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

	--step--1: .875rem;
	--step-0: 1.0625rem;
	--step-1: 1.3rem;
	--step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
	--step-3: clamp(2.3rem, 1.4rem + 3.8vw, 4.1rem);
	--step-4: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);

	--cell: 24px;
	--margin-x: max(16px, calc((100vw - 1120px) / 2 - 36px));
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper: #15211d;
		--grid: #1d2d28;
		--ink: #e8efe9;
		--ink-soft: #c2cfc6;
		--muted: #93a59a;
		--red: #f0776f;
		--red-soft: #3b2624;
		--board: #0f1815;
		--board-ink: #eef4ef;
		--board-line: #2a3d36;
		--card: #1a2924;
		--line: #2c403a;
		--focus: #f0776f;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--paper: #15211d;
	--grid: #1d2d28;
	--ink: #e8efe9;
	--ink-soft: #c2cfc6;
	--muted: #93a59a;
	--red: #f0776f;
	--red-soft: #3b2624;
	--board: #0f1815;
	--board-ink: #eef4ef;
	--board-line: #2a3d36;
	--card: #1a2924;
	--line: #2c403a;
	--focus: #f0776f;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
	margin: 0;
	color: var(--ink);
	font: 400 var(--step-0)/1.65 var(--body);
	background-color: var(--paper);
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: var(--cell) var(--cell);
	background-position: -1px -1px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
/* red notebook margin */
body::before {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	left: var(--margin-x);
	width: 2px;
	background: var(--red);
	opacity: .55;
	pointer-events: none;
	z-index: 0;
}

img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); font-weight: 500; }
p { margin: 0; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 36px; position: relative; z-index: 1; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: .6em 1em; border-radius: 8px; }
.skip:focus { left: 12px; }

/* ---------- Top bar ---------- */
.topbar {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 20;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__mark {
	display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
	background: var(--ink); color: var(--paper); font: 700 1.2rem/1 var(--display);
}
.logo__name { font: 700 1.05rem var(--display); }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a { text-decoration: none; padding: .45rem .8rem; border-radius: 999px; color: var(--ink-soft); font-size: .98rem; }
.nav a:hover { color: var(--ink); background: var(--grid); }
.nav .nav__cta { color: var(--paper); background: var(--ink); }
.nav .nav__cta:hover { color: var(--paper); background: var(--ink-soft); }

/* ---------- Lesson-plan field labels ---------- */
.field { font-size: var(--step--1); color: var(--muted); display: flex; gap: .5em; align-items: baseline; flex-wrap: wrap; }
.field__label { font-weight: 700; color: var(--red); letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(48px, 9vw, 112px) clamp(40px, 7vw, 88px); display: grid; gap: 24px; }
.hero__title { display: grid; gap: 10px; }
.hero__name { font-family: var(--body); font-weight: 700; font-size: var(--step-1); letter-spacing: .02em; color: var(--ink-soft); }
.hero__role { font-size: var(--step-3); line-height: 1.02; max-width: 12ch; }
.underline { position: relative; display: inline-block; white-space: nowrap; }
.underline__pen { position: absolute; left: -2%; right: -2%; bottom: -.14em; width: 104%; height: .32em; overflow: visible; }
.underline__pen path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 700; stroke-dashoffset: 0; animation: pen 1.1s .25s ease-out both; }
@keyframes pen { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
.hero__lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: 40ch; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.note {
	font: 600 1.7rem/1 var(--hand); color: var(--red);
	transform: rotate(-4deg); justify-self: end; margin-top: -12px; margin-right: 6%;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: .55em;
	font: 700 1rem/1 var(--body); text-decoration: none;
	padding: .95em 1.4em; border-radius: 999px; border: 2px solid transparent;
	transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: color-mix(in srgb, var(--red) 86%, #000); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--chalk { background: var(--board-ink); color: var(--board); flex: none; }
.btn--chalk:hover { background: #fff; }

/* ---------- Sections ---------- */
.section { padding-block: clamp(48px, 8vw, 96px); display: grid; gap: 20px; border-top: 1px dashed var(--line); }
.small { font-size: var(--step--1); color: var(--muted); }

.about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.about > div { display: grid; gap: 16px; }
.about p { max-width: 58ch; color: var(--ink-soft); }
.quote { margin: 0; padding: 24px 26px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; position: relative; box-shadow: 0 1px 0 var(--line), 0 12px 30px -18px rgba(29, 42, 68, .35); transform: rotate(-.6deg); }
.quote::before { content: "„"; position: absolute; top: -.35em; left: 14px; font: 700 4.5rem/1 var(--display); color: var(--red); }
.quote blockquote { margin: 0; }
.quote p { font: 500 var(--step-1)/1.45 var(--display); color: var(--ink); }
.quote figcaption { margin-top: 12px; font-size: var(--step--1); color: var(--muted); }

.roles { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.role { display: grid; gap: 6px; align-content: start; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.role__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--red-soft); margin-bottom: 6px; }
.role__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.role__name { font-weight: 700; line-height: 1.3; }
.role__desc { font-size: var(--step--1); color: var(--muted); }

.offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { display: grid; gap: 10px; align-content: start; padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; border-top: 4px solid var(--ink); }
.card p { color: var(--ink-soft); }

.steps { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.step { counter-increment: step; display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.step::before { content: counter(step) "."; font: 600 2rem/1 var(--hand); color: var(--red); }
.step p { color: var(--ink-soft); font-size: .98rem; }

/* ---------- Chalkboard contact ---------- */
.board {
	position: relative; z-index: 1;
	background: var(--board);
	color: var(--board-ink);
	border-top: 10px solid #8a6a45;
	border-bottom: 10px solid #8a6a45;
	background-image: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.06), transparent 60%), radial-gradient(ellipse at 90% 100%, rgba(255,255,255,.04), transparent 55%);
}
.board__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-block: clamp(40px, 7vw, 72px); }
.board__inner > div { display: grid; gap: 12px; max-width: 58ch; }
.board h2 { color: var(--board-ink); }
.board p { color: color-mix(in srgb, var(--board-ink) 80%, transparent); }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 1; background: var(--paper); border-top: 1px solid var(--line); }
.footer__inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 24px; font-size: var(--step--1); color: var(--muted); }
.footer a { color: var(--ink-soft); }

/* ---------- Prose (privacy / 404) ---------- */
.prose { padding-block: clamp(40px, 7vw, 80px); display: grid; gap: 16px; max-width: 760px; }
.prose h1 { font-size: var(--step-4); margin-bottom: 8px; }
.prose h2 { font-size: var(--step-1); margin-top: 16px; }
.prose p, .prose li { color: var(--ink-soft); max-width: 65ch; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.about { grid-template-columns: minmax(0, 1fr); }
	.roles, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.offer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	body::before { left: 8px; }
	.wrap { padding-inline: 20px; }
	.nav a:not(.nav__cta) { display: none; }
	.logo__name { font-size: .98rem; }
	.roles, .steps { grid-template-columns: minmax(0, 1fr); }
	.underline { white-space: normal; }
	.note { justify-self: start; margin-right: 0; }
	.btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}