/*
Theme Name: Sosar
Description: Sõsar Stuudio new theme. Replaces Impreza. Mobile first, no page builder.
Version: 0.18.1
Requires PHP: 8.1
Text Domain: sosar
*/

/* ---------------------------------------------------------------- font */

/* Self-hosted, see assets/fonts/README.md. Headings only. */
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("assets/fonts/bricolage-grotesque-800-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("assets/fonts/bricolage-grotesque-800-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens */

:root {
	/* Every colour is from photos of the studio: white walls, light wood
	   floor, the row of pastel chairs, the blue slide, the caramel ball pit,
	   the red Red Flyer and the green apple tree on the wall painting. */
	--white: #ffffff;
	--cream: #fdfaf5;
	--wood: #ead9c2;
	--wood-dark: #d6c1a3;

	--mint: #93d3b8;
	--mint-deep: #3d8b6c;
	--mint-dark: #2f6b53;
	--pink: #f3c3ce;
	--lilac: #cfc6e8;
	--sun: #f8d98d;
	--sky: #c3e5f2;

	--slide-blue: #1f6fd0;
	--flyer-red: #d4453a;
	--flyer-red-dark: #a8332a;
	--leaf: #7ac143;

	--ink: #2b2a27;
	--ink-soft: #625d55;
	--line: rgba(43, 42, 39, 0.1);

	--wrap: 76rem;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--radius-xl: 2rem;
	--radius: 1.25rem;
	--radius-small: 0.625rem;

	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-display: "Bricolage Grotesque", system-ui, sans-serif;

	--shadow-soft: 0 1px 2px rgba(43, 42, 39, 0.05), 0 12px 32px -12px rgba(43, 42, 39, 0.18);
	--shadow-lift: 0 2px 4px rgba(43, 42, 39, 0.06), 0 24px 48px -16px rgba(43, 42, 39, 0.28);

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--mint-dark);
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--flyer-red-dark);
}

:focus-visible {
	outline: 3px solid var(--slide-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.6rem, 7.2vw, 5.25rem);
}

h2 {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
}

h3 {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	letter-spacing: -0.015em;
	line-height: 1.15;
}

p {
	margin: 0 0 1em;
}

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.eyebrow {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 1rem;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: var(--gutter);
	top: 0.5rem;
	z-index: 100;
	background: var(--white);
	padding: 0.75rem 1rem;
	border-radius: var(--radius-small);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */

.button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.95rem 1.7rem;
	border: 0;
	border-radius: 999px;
	background: var(--flyer-red);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 20px -8px rgba(212, 69, 58, 0.7);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.button:hover,
.button:focus {
	color: var(--white);
	background: var(--flyer-red-dark);
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 14px 28px -10px rgba(212, 69, 58, 0.75);
}

.button--ghost {
	background: var(--white);
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--line), var(--shadow-soft);
}

.button--ghost:hover,
.button--ghost:focus {
	background: var(--white);
	color: var(--ink);
	box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-lift);
}

.button--small {
	padding: 0.7rem 1.2rem;
	font-size: 0.9375rem;
}

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}

.arrow-link::after {
	content: "→";
	transition: transform 0.25s var(--ease);
}

.arrow-link:hover::after,
.arrow-link:focus::after {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------- header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(253, 250, 245, 0.78);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	backdrop-filter: blur(16px) saturate(1.5);
	border-bottom: 1px solid var(--line);
}

/* The header is the one element that may run wider than the page column:
   ten menu items, a logo and a button do not fit in 76rem. */
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	min-height: 4.5rem;
	max-width: none;
}

.site-brand {
	flex: 0 1 auto;
	min-width: 0;
}

.site-brand span {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Below 384px (WordPress previews phones at 320px) the logo, the name and
   the menu button do not fit at full size, so everything gets a notch
   smaller rather than pushing the button off the screen. */
@media (max-width: 24rem) {
	.site-header__inner {
		gap: 0.75rem;
	}

	.site-brand {
		gap: 0.5rem;
		font-size: 1.05rem;
	}

	.site-brand img {
		width: 2rem;
		height: 2rem;
	}

	.nav-toggle {
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
	}
}

.site-brand {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--font-display);
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.site-brand img {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 1rem;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.nav-toggle__bars {
	display: block;
	position: relative;
	width: 1.1rem;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.nav-toggle__bars::before {
	top: -6px;
}

.nav-toggle__bars::after {
	top: 6px;
}

.main-nav {
	display: none;
}

.main-nav.is-open {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--cream);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-lift);
	padding: 0.5rem var(--gutter) 1.25rem;
	max-height: calc(100vh - 4.5rem);
	overflow-y: auto;
}

.main-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav li {
	border-bottom: 1px solid var(--line);
}

.main-nav li:last-child {
	border-bottom: 0;
}

.main-nav a {
	display: block;
	padding: 0.8rem 0.25rem;
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 1.05rem;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav .current-menu-item > a {
	color: var(--mint-dark);
}

.main-nav .sub-menu {
	padding-left: 1rem;
}

.main-nav .sub-menu a {
	font-weight: 400;
	font-size: 0.98rem;
}

/* The menu button sits on the right, so does the thumb: the open menu's
   items line up on the right too (Madis, 11.09.2026). */
@media (max-width: 74.99rem) {
	.main-nav.is-open {
		text-align: right;
	}

	.main-nav .sub-menu {
		padding-left: 0;
		padding-right: 1rem;
	}
}

.site-header__cta {
	display: none;
}

/* Ten menu items, one of them "Koolitused ja seminarid": the row only fits
   on a wide screen. Below that the button menu is the better answer. */
@media (min-width: 75rem) {
	.nav-toggle {
		display: none;
	}

	.main-nav {
		display: block;
	}

	.main-nav ul {
		display: flex;
		align-items: center;
		gap: 0.15rem;
	}

	.main-nav li {
		position: relative;
		border-bottom: 0;
	}

	.main-nav a {
		padding: 0.5rem 0.65rem;
		border-radius: 999px;
		font-size: 0.9375rem;
		white-space: nowrap;
		transition: background 0.2s var(--ease);
	}

	.main-nav a:hover,
	.main-nav a:focus {
		background: rgba(43, 42, 39, 0.06);
		color: var(--ink);
	}

	.main-nav .current-menu-item > a {
		background: var(--mint);
		color: var(--mint-dark);
	}

	.main-nav .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 12rem;
		padding: 0.4rem;
		background: var(--white);
		border-radius: var(--radius-small);
		box-shadow: var(--shadow-lift);
	}

	.main-nav li:hover > .sub-menu,
	.main-nav li:focus-within > .sub-menu {
		display: block;
	}
}

/* The booking button only fits next to the full menu on a wide screen. */
@media (min-width: 84rem) {
	.site-header__cta {
		display: block;
	}
}

/* ---------------------------------------------------------------- hero */

.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}

.hero__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.hero__text {
	max-width: 36rem;
}

.hero__text h1 {
	margin-bottom: 0.35em;
}

.hero__lead {
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.5;
	color: var(--ink-soft);
	max-width: 32rem;
}

.hero__lead p {
	/* The old page centred its text inline; the hero is left-aligned. */
	text-align: start !important;
}

/* The welcome line on the front page is a heading in the content. Under the
   big site name it reads as a subtitle, not a second title. */
.hero__lead h2,
.hero__lead h3 {
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 0.75em;
	text-align: start !important;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 1.5rem;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

.hero__meta a {
	color: inherit;
}

/* Two real photographs, stacked like prints on a table. */
.hero__media {
	position: relative;
	margin-inline: auto;
	width: 100%;
	max-width: 36rem;
}

.hero__photo {
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lift);
	background: var(--wood);
}

.hero__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.hero__photo--second {
	position: absolute;
	left: -6%;
	bottom: -10%;
	width: 42%;
	border-radius: var(--radius);
	border: 6px solid var(--white);
	transform: rotate(-4deg);
}

.hero__photo--second img {
	aspect-ratio: 1;
}

/* On a phone the hero clips at the screen edge, so the small print stays
   inside it instead of hanging over the left side. */
@media (max-width: 59.99rem) {
	.hero__photo--second {
		left: 0.25rem;
		bottom: -1.5rem;
	}

	.hero__media {
		margin-bottom: 1.5rem;
	}
}

/* The owl from the wall painting, as a sticker on the photo corner. */
/* The studio's logo on a white disc, stuck on the corner of the photograph. */
.hero__sticker {
	position: absolute;
	top: -1.75rem;
	right: -0.75rem;
	display: flex;
	width: clamp(5rem, 10vw, 7rem);
	aspect-ratio: 1;
	/* Straight, and only a sliver of white round the wreath. */
	padding: 0.15rem;
	border-radius: 50%;
	background: var(--white);
	box-shadow: var(--shadow-lift);
}

.hero__sticker img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (min-width: 60rem) {
	.hero__grid {
		grid-template-columns: 1.05fr 1fr;
	}

	.hero__media {
		margin-right: 0;
	}
}

/* ---------------------------------------------------------------- photo strip */

/* A row of photographs that slides slowly on its own. The row is printed
   twice, so when the first copy has passed the second is in the same place
   and the loop has no seam. It stops under the pointer; with reduced motion
   it stands still and scrolls by hand. */
.strip {
	padding-block: clamp(2rem, 4vw, 3rem) 0;
	overflow: hidden;
}

.strip__track {
	display: flex;
	gap: 0.875rem;
	width: max-content;
	padding-inline: 0.4375rem;
	animation: strip-roll 80s linear infinite;
}

.strip:hover .strip__track,
.strip:focus-within .strip__track {
	animation-play-state: paused;
}

/* Between the facts and Meist the row sits flush: both neighbouring
   sections bring their own padding. */
.strip {
	padding-block: 0;
}

@keyframes strip-roll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.strip {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.strip__track {
		animation: none;
	}
}

.strip__item {
	flex: 0 0 auto;
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--wood);
	box-shadow: var(--shadow-soft);
}

/* On a phone the row is lower and the pictures come in the 300 px size. */
@media (max-width: 40rem) {
	.strip__track {
		gap: 0.6rem;
		animation-duration: 60s;
	}

	/* One level more specific than the rule below it, so it wins on phones. */
	.strip .strip__item img {
		height: 8rem;
	}
}

.strip__item img {
	height: clamp(11rem, 24vw, 18rem);
	width: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.strip__item--tall img {
	aspect-ratio: 4 / 5;
}

/* ---------------------------------------------------------------- sections */

.section {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.section--tight {
	padding-block: clamp(2rem, 5vw, 4rem);
}

.section--white {
	background: var(--white);
}

.section__head {
	max-width: 44rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.section__head p {
	color: var(--ink-soft);
	font-size: 1.125rem;
	margin: 0;
}

/* ---------------------------------------------------------------- facts */

.facts {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.facts {
		grid-template-columns: repeat(3, 1fr);
	}
}

.fact {
	padding: 1.5rem 1.5rem 1.35rem;
	border-radius: var(--radius);
	background: var(--mint);
}

.fact:nth-child(2) {
	background: var(--sun);
}

.fact:nth-child(3) {
	background: var(--pink);
}

.fact__number {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 5vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.03em;
}

.fact__label {
	display: block;
	margin-top: 0.4rem;
	font-weight: 600;
	color: rgba(43, 42, 39, 0.8);
}

/* ---------------------------------------------------------------- about teaser */

.about {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.about__text p {
	font-size: 1.125rem;
	color: var(--ink-soft);
	text-align: start !important;
}

.about__photo {
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lift);
	background: var(--wood);
}

.about__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (min-width: 60rem) {
	.about {
		grid-template-columns: 1fr 1.1fr;
	}

	.about--flip .about__photo {
		order: -1;
	}
}

/* ---------------------------------------------------------------- bento */

.bento {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.bento {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 60rem) {
	.bento {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(11rem, auto);
	}

	.tile--feature {
		grid-column: span 2;
		grid-row: span 2;
	}

	.tile--wide {
		grid-column: span 2;
	}
}

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.35rem;
	min-height: 11rem;
	padding: 1.5rem;
	border-radius: var(--radius);
	background: var(--mint);
	color: var(--ink);
	text-decoration: none;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.tile:hover,
.tile:focus {
	color: var(--ink);
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

/* The row of chairs, in order: mint, pink, pale yellow, lilac, sky, wood. */
.tile:nth-child(6n + 3) { background: var(--pink); }
.tile:nth-child(6n + 4) { background: var(--sun); }
.tile:nth-child(6n + 5) { background: var(--lilac); }
.tile:nth-child(6n + 6) { background: var(--sky); }
.tile:nth-child(6n + 7) { background: var(--wood); }

/* A white line icon on a slightly darkened disc, so it reads on every one
   of the tile colours, the pale yellow and the wood included. */
.tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: auto;
	border-radius: 50%;
	background: rgba(43, 42, 39, 0.22);
	color: #fff;
}

.tile__icon .icon {
	width: 1.5rem;
	height: 1.5rem;
}

.tile__title {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2vw, 1.75rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.tile__more {
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.75;
}

.tile--feature .tile__icon {
	background: rgba(255, 255, 255, 0.22);
}

.tile--feature {
	min-height: 20rem;
	color: var(--white);
	background: var(--ink);
}

.tile--feature:hover,
.tile--feature:focus {
	color: var(--white);
}

.tile--feature img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}

.tile--feature:hover img {
	transform: scale(1.04);
}

.tile--feature::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(43, 42, 39, 0) 35%, rgba(43, 42, 39, 0.78) 100%);
}

.tile--feature > * {
	position: relative;
	z-index: 1;
}

.tile--feature .tile__title {
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
	text-shadow: 0 1px 14px rgba(43, 42, 39, 0.45);
}

/* On a phone the tiles stack, so each is a low row: the icon on the left,
   the name and "Vaata" beside it, not under it. The photo tile keeps its
   own shape. */
@media (max-width: 59.99rem) {
	.tile:not(.tile--feature) {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		column-gap: 1rem;
		row-gap: 0.15rem;
		align-items: center;
		min-height: 0;
		padding: 1rem 1.25rem;
	}

	.tile:not(.tile--feature) .tile__icon {
		grid-row: 1 / span 2;
		margin-bottom: 0;
	}

	.tile:not(.tile--feature) .tile__title {
		margin-top: 0;
		align-self: end;
	}

	.tile:not(.tile--feature) .tile__more {
		align-self: start;
	}

	.tile--feature {
		min-height: 17rem;
	}
}

.tile--feature .tile__more {
	opacity: 1;
}

.tile--feature .button {
	align-self: flex-start;
	margin-top: 0.5rem;
}

/* ---------------------------------------------------------------- drawing */

/* Madis's coloured-pencil drawing of the room (PR #9 onwards) in a white
   frame with a thin sky-blue edge, and a pastel bunting garland across the
   top (variant C of three mock-ups, 10.09.2026). The picture itself is left
   alone: no fade, no filter. Phones show the whole drawing; wider screens
   crop a little of the plain ceiling and floor. */
.drawing {
	margin: 0;
	padding: clamp(2rem, 5vw, 4rem) var(--gutter);
}

/* Edge to edge: the frame spans the page, leaving only the page gutter. */
.drawing__frame {
	position: relative;
	/* Room for the garland to hang above the frame; % of the width, so it
	   scales with the bunting. */
	padding-top: 3.4%;
}

.drawing__bunting {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: auto;
	overflow: visible;
}

.drawing__mat {
	background: var(--white, #fff);
	padding: clamp(0.5rem, 1.4vw, 0.875rem);
	border-radius: clamp(1rem, 2.5vw, 1.625rem);
	box-shadow: inset 0 0 0 5px var(--sky), 0 18px 40px -18px rgba(43, 42, 39, 0.35);
}

.drawing img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	/* Low enough that the Red Flyer keeps its wheels; the crop comes off
	   the ceiling instead. */
	object-position: 50% 70%;
	border-radius: clamp(0.625rem, 1.4vw, 0.875rem);
}

@media (min-width: 48rem) {
	.drawing img {
		aspect-ratio: 16 / 9;
		/* Full width would make it taller than the screen; the extra comes
		   off the plain ceiling. */
		max-height: 46rem;
	}
}

/* ---------------------------------------------------------------- contact strip */

/* No card around it: the text and the map sit straight on the page ground. */
.contact {
	display: grid;
	gap: 2rem;
}

.contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
	font-size: 1.05rem;
}

.contact__list a {
	color: var(--ink);
	font-weight: 600;
}

@media (min-width: 60rem) {
	.contact {
		grid-template-columns: 1fr 1.2fr;
		align-items: center;
	}
}

/* Facebook and Instagram as their own marks, in the text colour. */
.social {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	gap: 0.75rem;
}

/* A phone or an envelope on a small pastel disc, in front of a contact
   detail. The discs take the chairs' colours. */
.contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	margin-right: 0.6rem;
	border-radius: 50%;
	color: var(--ink);
	vertical-align: middle;
}

.contact-icon .icon {
	width: 0.95rem;
	height: 0.95rem;
}

.contact-icon--phone {
	background: var(--sun);
}

.contact-icon--mail {
	background: var(--pink);
}

.contact__list li,
.site-footer__contact li,
.entry__body p:has(> .contact-icon) {
	display: flex;
	align-items: center;
}

/* The marks on the site's own discs, wherever they appear, in the chairs'
   colours like the phone and the mail: Facebook on the blue one, Instagram
   on the lilac one, the mark itself in ink. The colour sits on the icon, so
   the same rule serves the buttons, the inline row and the footer. */
.icon--social {
	width: 1.5rem;
	height: 1.5rem;
	box-sizing: border-box;
	color: var(--ink);
	padding: 0.2em;
	border-radius: 50%;
}

.icon--facebook {
	background: var(--sky);
}

.icon--instagram {
	background: var(--lilac);
}

/* The buttons are the marks themselves, 3rem, lifting on hover. */
.social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: var(--ink);
	transition: transform 0.25s var(--ease), filter 0.25s var(--ease);
}

.social__link .icon--social {
	width: 100%;
	height: 100%;
}

.social__link:hover,
.social__link:focus {
	color: var(--ink);
	transform: translateY(-2px);
	filter: brightness(1.04);
}

/* Inside page content the generic list rules would indent the buttons and
   space them like paragraphs; the row keeps its own shape there. */
.entry__body ul.social,
.prices__body ul.social {
	padding-left: 0;
	margin-top: 0.75rem;
}

/* In a sentence, after a name: smaller, on the same line, a small gap. */
.social--inline {
	display: inline-flex;
	vertical-align: middle;
	gap: 0.4rem;
	margin: 0 0 0 0.5rem;
}

.social--inline .social__link {
	width: 2.25rem;
	height: 2.25rem;
}


.site-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.site-footer__social .icon--social {
	width: 1.25rem;
	height: 1.25rem;
}

/* The map: the studio pinned, no click needed. */
.map {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--sky);
	box-shadow: var(--shadow-soft);
}

.map__frame {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
}

/* Google Maps and Waze, as two pills on the map's lower corner. */
.map__links {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.map__link {
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	background: var(--white);
	color: var(--ink);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--shadow-soft);
}

.map__link:hover,
.map__link:focus {
	color: var(--flyer-red-dark);
}

/* On the Kontakt page the map sits under the text, full column width. */
.entry .map {
	margin-top: 2rem;
	max-width: 52rem;
	margin-inline: auto;
}

/* ---------------------------------------------------------------- content pages */

.page-header {
	padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem);
	text-align: center;
	background:
		radial-gradient(50rem 24rem at 90% 0%, rgba(195, 229, 242, 0.9), transparent 60%),
		var(--cream);
}

.page-header h1 {
	margin: 0 auto;
	max-width: 20ch;
}

.page-header p {
	margin: 0.75rem 0 0;
	color: var(--ink-soft);
}

.entry {
	padding-block: clamp(2rem, 5vw, 4rem);
}

/* Right under the page header its own bottom padding already gives room;
   the full top padding on top of it left a 120 px hole on desktop. */
.page-header + .entry {
	padding-top: clamp(0.75rem, 2vw, 1.25rem);
}

.entry__body {
	max-width: 44rem;
	margin-inline: auto;
	font-size: 1.125rem;
}

/* Reading width is for text. A page that is a gallery gets the full column. */
.entry__body:has(.sosar-gallery) {
	max-width: none;
}

.entry__body > * + * {
	margin-top: 1.2rem;
}

.entry__body h2,
.entry__body h3 {
	margin-top: 2.25rem;
}

.entry__body ul,
.entry__body ol {
	padding-left: 1.25rem;
}

.entry__body img {
	border-radius: var(--radius);
}

/* The old builder laid pictures out in columns; stripped of the columns
   they land one after another in a single paragraph, touching. A paragraph
   with several pictures becomes a grid: side by side with a gap, one per
   column on a phone. */
.entry__body p:has(> img + img) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
}

.entry__body p:has(> img + img) img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.entry__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.entry__body th,
.entry__body td {
	padding: 0.7rem 0.6rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.entry__body th {
	font-weight: 700;
}

.table-scroll {
	overflow-x: auto;
}

/* ---------------------------------------------------------------- prices */

/* Hinnad and Lisateenused on one page, in one column: every price table is
   a white card, the extras follow the events under their own heading. */
.prices {
	padding-block: clamp(2rem, 5vw, 4rem);
}

.prices__body {
	max-width: 52rem;
	margin-inline: auto;
	font-size: 1.0625rem;
}

.prices__body > * + * {
	margin-top: 1.1rem;
}

.prices__body h2 {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	margin-top: 2rem;
}

.prices__body h3 {
	margin-top: 1.5rem;
}

.prices__body p {
	text-align: start !important;
}

/* The price lists come from TablePress, so the owner edits them as tables.
   On the page they are not shown as tables: every row is its own card, the
   service on the left, the price on the right in the heading face.
   Only TablePress tables: the booking calendar is a table on a content page
   too, and the unscoped rules turned its weeks into cards. */
:is(.prices__body, .entry__body) .table-scroll {
	margin-block: 1.25rem 1.5rem;
	padding: 0;
	overflow: visible;
	background: none;
	box-shadow: none;
}

:is(.prices__body, .entry__body) table.tablepress,
:is(.prices__body, .entry__body) .tablepress tbody {
	display: block;
	width: 100%;
	border: 0;
	font-size: 1rem;
}

/* TablePress paints stripes, hover and cell rules through these variables;
   emptied here so the cards carry their own look. */
:is(.prices__body, .entry__body) .tablepress {
	--odd-bg-color: transparent;
	--even-bg-color: transparent;
	--hover-bg-color: transparent;
	--border-color: transparent;
	--padding: 0;
	--text-color: var(--ink);
	--odd-text-color: var(--ink);
	--even-text-color: var(--ink);
	--hover-text-color: var(--ink);
	margin: 0;
}

:is(.prices__body, .entry__body) .tablepress thead {
	display: none;
}

:is(.prices__body, .entry__body) .tablepress tbody {
	display: grid;
	gap: 0.75rem;
}

:is(.prices__body, .entry__body) .tablepress tr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: 1.05rem 1.35rem;
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: var(--shadow-soft);
}

:is(.prices__body, .entry__body) .tablepress td {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

:is(.prices__body, .entry__body) .tablepress td:first-child {
	flex: 1 1 16rem;
	line-height: 1.45;
}

:is(.prices__body, .entry__body) .tablepress td:last-child {
	flex: 0 0 auto;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.2rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--mint-dark);
	text-align: right;
	white-space: nowrap;
}

/* TablePress prints an "Edit" link for logged-in admins; not on this page. */
:is(.prices__body, .entry__body) .tablepress-edit-link,
:is(.prices__body, .entry__body) a[href*="page=tablepress"] {
	display: none;
}

@media (max-width: 30rem) {
	:is(.prices__body, .entry__body) .tablepress td:last-child {
		text-align: left;
		width: 100%;
	}
}
.prices__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: clamp(2rem, 5vw, 3rem);
}

.cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 60rem) {
	.cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.5rem;
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	box-shadow: var(--shadow-soft);
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card:hover,
.card:focus {
	color: var(--ink);
	transform: translateY(-3px);
	box-shadow: var(--shadow-lift);
}

.card__title {
	font-family: var(--font-display);
	font-size: 1.35rem;
	line-height: 1.1;
}

.card__more {
	margin-top: auto;
	padding-top: 0.75rem;
	font-weight: 700;
	font-size: 0.9375rem;
}

.notice {
	padding: 1rem 1.25rem;
	border-radius: var(--radius-small);
	background: var(--wood);
}

/* ---------------------------------------------------------------- meist */

/* The Meist page (page-meist.php): the owner's text in the order of the
   room, each part with the studio's photographs. */
.about-page {
	padding-top: clamp(0.75rem, 2vw, 1.25rem);
}

/* The page's own collage, framed like the drawing on the front page, with
   the same bunting over it; the frame's edge is pink here. */
.about-cover {
	position: relative;
	max-width: 62rem;
	margin: 0 auto;
	padding-top: 3.4%;
}

.about-cover__bunting {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: auto;
	overflow: visible;
}

.about-cover__mat {
	background: var(--white);
	padding: clamp(0.4rem, 1.2vw, 0.75rem);
	border-radius: clamp(1rem, 2.5vw, 1.625rem);
	box-shadow: inset 0 0 0 5px var(--pink), 0 18px 40px -18px rgba(43, 42, 39, 0.35);
}

.about-cover__mat img {
	width: 100%;
	border-radius: clamp(0.625rem, 1.4vw, 0.875rem);
}

/* The story on the left, the two numbers beside it as notes pinned at a
   slant; on a phone the notes follow the story. */
.about-intro {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	max-width: 68rem;
	margin: clamp(2.5rem, 6vw, 4.5rem) auto clamp(3rem, 7vw, 5.5rem);
}

@media (min-width: 60rem) {
	.about-intro {
		grid-template-columns: 1.5fr 1fr;
	}
}

.about-intro__lead p {
	margin: 0;
	font-size: clamp(1.125rem, 1.6vw, 1.3rem);
	line-height: 1.65;
	text-align: start !important;
}

.about-intro__lead p::first-letter {
	float: left;
	margin: 0.08em 0.1em 0 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 3.6em;
	line-height: 0.8;
	color: var(--flyer-red);
}

.about-notes {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 40rem) and (max-width: 59.99rem) {
	.about-notes {
		grid-template-columns: 1fr 1fr;
	}
}

.note {
	padding: 1.4rem 1.5rem 1.3rem;
	border-radius: var(--radius);
	background: var(--mint);
	box-shadow: var(--shadow-soft);
	transform: rotate(-1.5deg);
}

.note:nth-child(2) {
	background: var(--sun);
	transform: rotate(1.2deg);
}

.note__number {
	display: block;
	margin-bottom: 0.45rem;
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4.5vw, 3rem);
	line-height: 1;
	letter-spacing: -0.03em;
}

.note p {
	margin: 0;
	font-weight: 500;
	line-height: 1.5;
	text-align: start !important;
	color: rgba(43, 42, 39, 0.85);
}

.note img.emoji {
	display: inline;
	width: 1em;
	height: 1em;
	vertical-align: -0.1em;
}

/* One part of the room: a round icon and its name, then the text. */
.about-part {
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

.about-part--white {
	background: var(--white);
}

.about-part__head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.about-part__head h2 {
	margin: 0;
}

.about-part__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--mint);
	color: var(--ink);
}

.about-part__icon .icon {
	width: 1.6rem;
	height: 1.6rem;
}

.about-part__icon--sun { background: var(--sun); }
.about-part__icon--sky { background: var(--sky); }
.about-part__icon--pink { background: var(--pink); }

.about-text {
	text-align: start !important;
}

/* The play area: the photographs on one side, everything there is to play
   with as a list of pastel-dotted cards on the other. On a wide screen the
   photographs stay in view while the list scrolls past. */
.about-play {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 60rem) {
	.about-play {
		grid-template-columns: 1fr 1.25fr;
	}

	.about-mosaic {
		position: sticky;
		top: 6rem;
	}
}

.about-mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.about-mosaic img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}

.about-mosaic img:first-child {
	grid-column: span 2;
	aspect-ratio: 3 / 2;
}

.toy-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

@media (min-width: 40rem) {
	.toy-list {
		grid-template-columns: 1fr 1fr;
	}
}

.toy-list li {
	position: relative;
	padding: 0.8rem 1rem 0.8rem 2.5rem;
	border-radius: var(--radius-small);
	background: var(--cream);
	font-size: 1rem;
	line-height: 1.45;
}

.toy-list li::first-letter {
	text-transform: uppercase;
}

.toy-list li::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1.1rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--mint);
}

/* The chairs' colours again, in their order. */
.toy-list li:nth-child(6n + 2)::before { background: var(--pink); }
.toy-list li:nth-child(6n + 3)::before { background: var(--sun); }
.toy-list li:nth-child(6n + 4)::before { background: var(--lilac); }
.toy-list li:nth-child(6n + 5)::before { background: var(--sky); }
.toy-list li:nth-child(6n + 6)::before { background: var(--flyer-red); }

.about-callout {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius);
	background: var(--lilac);
	line-height: 1.5;
}

.about-callout__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--white);
}

.about-callout__icon .icon {
	width: 1.25rem;
	height: 1.25rem;
}

/* The kitchen: the text and the paid extras beside two photographs laid one
   over the other, like the prints in the front page hero. */
.about-kitchen {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media (min-width: 60rem) {
	.about-kitchen {
		grid-template-columns: 1.1fr 1fr;
	}
}

.about-extra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.25rem;
	margin-top: 1.5rem;
	padding: 1.1rem 1.35rem;
	border-radius: var(--radius);
	background: var(--sun);
}

.about-extra p {
	margin: 0;
	flex: 1 1 16rem;
	font-weight: 600;
	text-align: start !important;
}

.about-stack {
	position: relative;
	padding: 0 0 12% 10%;
}

.about-stack__main,
.about-stack__second {
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lift);
	background: var(--wood);
}

.about-stack__main img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.about-stack__second {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44%;
	border: 6px solid var(--white);
	border-radius: var(--radius);
	transform: rotate(-4deg);
}

.about-stack__second img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* The toilet and the photo wall: two cards side by side, a photograph on top. */
.about-cards {
	display: grid;
	gap: 1.25rem;
	margin-top: clamp(3rem, 7vw, 5rem);
}

@media (min-width: 48rem) {
	.about-cards {
		grid-template-columns: 1fr 1fr;
	}
}

.about-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius);
	background: var(--white);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.about-card img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.about-card__body {
	padding: 1.5rem 1.5rem 1.25rem;
}

.about-card h2 {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.about-card .about-part__icon {
	width: 2.75rem;
	height: 2.75rem;
}

.about-card .about-part__icon .icon {
	width: 1.35rem;
	height: 1.35rem;
}

.about-card p {
	margin: 0;
}

.about-more {
	margin-top: clamp(2rem, 5vw, 3rem);
}

/* ---------------------------------------------------------------- kontakt */

/* The Kontakt page (page-kontakt.php): the photograph beside three big cards
   (phone, e-mail, address), the map, then the company and the way to book. */
.contact-page {
	padding-block: clamp(0.75rem, 2vw, 1.25rem) clamp(3rem, 7vw, 5rem);
}

.contact-hero {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	max-width: 68rem;
	margin: 0 auto;
}

@media (min-width: 60rem) {
	.contact-hero {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-hero__media {
	position: relative;
	/* Room for the logo sticker over the photograph's corner. */
	padding: 1.5rem 0.75rem 0 0;
}

.contact-hero__photo {
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lift);
	background: var(--wood);
	transform: rotate(-1.5deg);
}

.contact-hero__photo img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.contact-hero .hero__sticker {
	top: 0;
	right: 0;
}

.contact-cards {
	display: grid;
	gap: 0.85rem;
}

/* A whole card is the link: a big target for a thumb. */
.contact-card {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1.1rem;
	align-items: center;
	padding: 1.1rem 1.35rem;
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	box-shadow: var(--shadow-soft);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.contact-card:hover,
.contact-card:focus {
	color: var(--ink);
	transform: translateY(-2px);
	box-shadow: var(--shadow-lift);
}

.contact-card .contact-icon {
	grid-row: 1 / span 2;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0;
}

.contact-card .contact-icon .icon {
	width: 1.4rem;
	height: 1.4rem;
}

.contact-icon--pin {
	background: var(--mint);
}

.contact-card__label {
	align-self: end;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.contact-card__value {
	align-self: start;
	min-width: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.2rem, 2.4vw, 1.55rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.contact-card__value small {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--ink-soft);
}

/* On a phone the e-mail address has to fit on one line: a smaller disc,
   less padding, a notch smaller type. */
@media (max-width: 30rem) {
	.contact-card {
		padding: 1rem 1.1rem;
		column-gap: 0.9rem;
	}

	.contact-card .contact-icon {
		width: 2.75rem;
		height: 2.75rem;
	}

	.contact-card__value {
		font-size: 1.1rem;
	}
}

/* Facebook and Instagram: the same cards, the mark on its own disc (sky,
   lilac) in place of the contact icon. Side by side only while the cards
   have the full width to themselves; beside the photograph half a column
   is too narrow for "@sosarstuudio". */
.contact-cards__social {
	display: grid;
	gap: 0.85rem;
}

@media (min-width: 30rem) and (max-width: 59.99rem) {
	.contact-cards__social {
		grid-template-columns: 1fr 1fr;
	}

	.contact-cards__social .contact-card__value {
		font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	}
}

.contact-card .icon--social {
	grid-row: 1 / span 2;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0.8rem;
}

@media (max-width: 30rem) {
	.contact-card .icon--social {
		width: 2.75rem;
		height: 2.75rem;
		padding: 0.65rem;
	}
}

.contact-map {
	margin-top: clamp(3rem, 7vw, 5rem);
	scroll-margin-top: 6rem;
}

@media (min-width: 48rem) {
	.contact-map .map__frame {
		aspect-ratio: 21 / 9;
	}
}

.contact-extra {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

@media (min-width: 48rem) {
	.contact-extra {
		grid-template-columns: 1.3fr 1fr;
	}
}

.company-card,
.contact-cta {
	padding: 1.5rem 1.6rem;
	border-radius: var(--radius);
}

.company-card {
	background: var(--white);
	box-shadow: var(--shadow-soft);
}

.company-card h2,
.contact-cta h2 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.company-card__list {
	margin: 0;
}

.company-card__list div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.15rem 1rem;
	padding-block: 0.7rem;
	border-bottom: 1px solid var(--line);
}

.company-card__list div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.company-card__list dt {
	color: var(--ink-soft);
}

.company-card__list dd {
	margin: 0;
	font-weight: 600;
}

.contact-cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--mint);
}

.contact-cta .hero__actions {
	margin: 0.25rem 0 0;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
	background: var(--ink);
	color: rgba(253, 250, 245, 0.85);
	padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}

.site-footer a {
	color: var(--cream);
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--sun);
}

.site-footer__grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 1fr;
}

@media (min-width: 45rem) {
	.site-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.site-footer h2 {
	color: var(--cream);
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	margin-bottom: 0.6rem;
}

.site-footer__brand {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	letter-spacing: -0.02em;
	color: var(--cream);
	line-height: 1;
	margin-bottom: 0.75rem;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer li + li {
	margin-top: 0.4rem;
}

.site-footer__bottom {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(253, 250, 245, 0.15);
	font-size: 0.9rem;
	color: rgba(253, 250, 245, 0.6);
}

/* ---------------------------------------------------------------- tegevused */

/* Two kinds of activity on one page, told apart by colour: the children's
   weekly groups in green (their colour in the booking calendar), the
   grown-ups' room in the slide blue. The doors and the sections share it. */
.activity-tone--kids {
	--activity-tint: #eef8f3;
	--activity-accent: var(--mint);
	--activity-deep: var(--mint-dark);
}

.activity-tone--grown-ups {
	--activity-tint: #edf6fb;
	--activity-accent: var(--sky);
	--activity-deep: #17549e;
}

.activity-doors {
	display: grid;
	gap: 1rem;
	padding-bottom: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 40rem) {
	.activity-doors {
		grid-template-columns: 1fr 1fr;
	}
}

.activity-door {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: clamp(1.1rem, 3vw, 1.6rem);
	border-radius: var(--radius-xl);
	background: var(--activity-accent);
	color: var(--ink);
	text-decoration: none;
	box-shadow: var(--shadow-soft);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* The site's links turn red on hover and focus; a door keeps its ink. */
.activity-door:hover,
.activity-door:focus,
.activity-door:focus-visible {
	color: var(--ink);
	transform: translateY(-3px);
	box-shadow: var(--shadow-lift);
}

.activity-door__icon,
.activity__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border-radius: 50%;
}

.activity-door__icon {
	width: 3.5rem;
	height: 3.5rem;
	background: var(--white);
	color: var(--activity-deep);
}

.activity-door__icon .icon,
.activity__icon .icon {
	width: 1.75rem;
	height: 1.75rem;
}

.activity-door__text {
	display: grid;
	gap: 0.2rem;
	flex: 1 1 auto;
	min-width: 0;
}

.activity-door__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.2rem, 3vw, 1.5rem);
	line-height: 1.15;
}

.activity-door__line {
	font-size: 0.95rem;
	line-height: 1.35;
}

.activity-door__arrow {
	flex: 0 0 auto;
	font-size: 1.4rem;
	color: var(--activity-deep);
}

/* Each section is a band of its own colour, a stripe on top, so scrolling
   from one to the other is plain to see. Clear of the sticky header when a
   door jumps to it. */
.activity {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	background: var(--activity-tint);
	border-top: 0.375rem solid var(--activity-accent);
	scroll-margin-top: 4.5rem;
}

/* Heading and body one width, whatever the body holds: a list widens
   .entry__body to 60rem (.sosar-booking), plain text keeps it at 44rem, and
   the heading sat 88 px off the cards. 52rem, as on Hinnad. */
.activity__head,
.activity .activity__body {
	max-width: 52rem;
}

.activity__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 auto clamp(1.25rem, 3vw, 2rem);
}

.activity__head h2 {
	margin: 0;
}

.activity__icon {
	width: 3.75rem;
	height: 3.75rem;
	background: var(--activity-accent);
	color: var(--ink);
}

.activity__line {
	margin: 0.3rem 0 0;
	color: var(--activity-deep);
	font-weight: 600;
}

.activity__body h3 {
	color: var(--activity-deep);
}

.activity__body img {
	border-radius: var(--radius);
}

/* The old pages justify their text inline; on a phone that opens holes
   between the words. Same as Meist and Hinnad. */
.activity__body [style*="justify"] {
	text-align: start !important;
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}