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

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

/* Self-hosted, see assets/fonts/README.md. Headings only. Comfortaa is the
   old site's heading font; one variable file per subset covers 300–700. */
@font-face {
	font-family: "Comfortaa";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/comfortaa-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: "Comfortaa";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/comfortaa-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;

	/* Softer, more pastel since 19.09.2026 (the owner: "pastelsemad/pehmemad").
	   Text on them is --ink, 10:1 or more. */
	--mint: #b9e2cf;
	--mint-deep: #3d8b6c;
	--mint-dark: #2f6b53;
	--pink: #f6d5dc;
	--lilac: #ddd6f0;
	--sun: #fae3a9;
	--sky: #d5ecf5;

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

	/* The main action ("Broneeri aeg"): the studio's own pink, the same as the
	   Huviringid card (Madis 20.09.2026). Dark text on it, 10.6:1 (hover 9.1:1).
	   Red stays for errors only. */
	--action: #f6d5dc;
	--action-hover: #efc3cd;
	--action-edge: #dda8b6;
	--action-ink: #2b2a27;
	--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: "Comfortaa", 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: 700;
	line-height: 1.18;
	letter-spacing: 0;
	color: var(--ink);
	margin: 0 0 0.5em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.2rem, 6.2vw, 4.4rem);
}

h2 {
	font-size: clamp(1.65rem, 3.8vw, 2.6rem);
}

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(--action);
	color: var(--action-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	box-shadow: inset 0 0 0 1.5px var(--action-edge), 0 8px 20px -10px rgba(222, 132, 116, 0.8);
	transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}

.button:hover,
.button:focus {
	color: var(--action-ink);
	background: var(--action-hover);
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1.5px var(--action-edge), 0 14px 28px -12px rgba(222, 132, 116, 0.85);
}

.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;
	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;
}

/* Open, the three bars become a cross and the label reads "Sulge". */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

.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;
}

/* The phone menu ends with the booking button (the header has no room for
   it there). The menu's own link rules above must not restyle the button. */
.main-nav__cta {
	margin: 1.25rem 0 0.25rem;
}

.main-nav__cta .button {
	display: inline-flex;
	padding: 0.95rem 1.7rem;
	color: var(--action-ink);
	font-size: 1rem;
}

/* 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__cta {
		display: none;
	}

	.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);
	}

	/* On the mint pill --mint-dark is 4.43:1, just under the 4.5 the text needs. */
	.main-nav .current-menu-item > a {
		background: var(--mint);
		color: #2a6049;
	}

	.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;
}

/* Until the large photograph has loaded, the frame shows the same picture's
   small size (inline background from sosar_photo_placeholder()), not an
   empty beige box; the wood tone stays behind it for a missing picture. */
.hero__photo {
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lift);
	background: var(--wood) center / cover no-repeat;
}

.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.01em;
}

.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);
}

/* The frame spans the page up to 82rem, then stays centred: at 16:9 that is
   the 46rem height cap below, so the picture is never squeezed into a thin
   band on a very wide (or zoomed-out) screen. */
.drawing__frame {
	position: relative;
	max-width: 82rem;
	margin-inline: auto;
	/* 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: drawn in the site's own colours from the land board's orthophoto
   (template-parts/map.php). Nothing loads from a third party. */
.map {
	position: relative;
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--white);
	box-shadow: var(--shadow-soft);
}

.map__drawing {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 700 / 550;
	background: #f4f1e8;
}

.map__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 1rem;
	padding: 0.8rem 1rem 0.9rem;
}

/* Google Maps and Waze, as two pills under the drawing. */
.map__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

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

.map__link:hover,
.map__link:focus {
	color: var(--ink);
	background: var(--sky);
}

/* The land board's credit: a condition of the open data licence. */
/* 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;
	/* One even fade from the top edge down into the page, the same across
	   the whole width. It was a blue corner at the top right (19.09.2026:
	   "ühtlaselt kogu ülaäärest alla hajuv"). */
	background: linear-gradient(180deg, var(--sky) 0%, rgba(213, 236, 245, 0.45) 55%, var(--cream) 100%);
}

.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;
}

/* The old editor justified paragraphs and list items inline (the booking
   terms, Kodukord); in a 390 px column that opens holes between the words.
   Same rule as the Meist, Hinnad and Tegevused pages. */
.entry__body [style*="justify"] {
	text-align: start !important;
}

/* The booking terms, a <details> the owner writes into the Broneerimine
   page. Unstyled, the summary sat on the first paragraph and the list items
   touched each other; the whole block read as one wall. Room between the
   pieces: summary, paragraphs, each list item. 1.25rem was still too tight
   (21.09.2026): a rule and a clear gap set it off from the calendar above,
   and every gap inside grew. */
.sosar-rules {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}

.sosar-rules > summary {
	cursor: pointer;
	font-weight: 600;
	margin-bottom: 2rem;
}

.sosar-rules p,
.sosar-rules ul,
.sosar-rules ol {
	margin: 0 0 1.75rem;
}

.sosar-rules li + li {
	margin-top: 1.1rem;
}

.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: 700;
	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%;
	}
}
/* The way to the invitation maker under the events table: a small white
   button and one line on what it gives, on a dotted card. */
.invite-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border: 2px dashed var(--pink);
	border-radius: 1.25rem;
}

.invite-note span {
	flex: 1 1 14rem;
	font-size: 0.9375rem;
}

.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 cover, the owner's story, then the
   studio's photographs of the room. */
.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 in one readable column; the first paragraph is the lead. */
.about-story {
	max-width: 44rem;
	margin: clamp(2.5rem, 6vw, 4.5rem) auto clamp(3rem, 7vw, 5.5rem);
}

.about-story p {
	margin: 0 0 1.1em;
	font-size: clamp(1.0625rem, 1.3vw, 1.15rem);
	line-height: 1.7;
	text-align: start !important;
}

.about-story p:last-child {
	margin-bottom: 0;
}

.about-story .about-story__lead {
	font-size: clamp(1.125rem, 1.6vw, 1.3rem);
	line-height: 1.65;
}

.about-story__lead::first-letter {
	float: left;
	margin: 0.08em 0.1em 0 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 3.6em;
	line-height: 0.8;
	color: var(--action-edge);
}

.about-part {
	padding-block: clamp(3rem, 7vw, 5.5rem);
}

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

/* The room in photographs: the slide large, the rest in squares; two
   columns on a phone, four on a wide screen. */
.about-photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: clamp(2rem, 5vw, 3rem);
}

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

	/* Seven pictures: the big one and four beside it, the last two wide. */
	.about-photos img:nth-child(n + 6) {
		grid-column: span 2;
		aspect-ratio: 2 / 1;
	}
}

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

.about-photos img:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

@media (max-width: 59.99rem) {
	.about-photos img:first-child {
		grid-row: auto;
		aspect-ratio: 3 / 2;
	}
}

/* ---------------------------------------------------------------- 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) center / cover no-repeat;
	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: 700;
	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 {
	display: grid;
	gap: 1.25rem;
	margin-top: clamp(3rem, 7vw, 5rem);
	scroll-margin-top: 6rem;
}

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

.contact-map__side {
	display: grid;
	gap: 1.25rem;
}

.info-card {
	position: relative;
	padding: 1.4rem 1.5rem;
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: var(--shadow-soft);
}

.info-card h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

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

.info-card p:last-child {
	margin-bottom: 0;
}

/* A place kept for the owner's own words: dashed, and says so. */
.info-card--todo {
	background: transparent;
	box-shadow: none;
	border: 2px dashed var(--wood-dark);
}

.todo-tag {
	display: inline-block;
	margin-bottom: 0.6rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--sun);
	color: var(--ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.entrance-photo {
	margin: 1rem 0 0;
}

.entrance-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-small);
}

.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;
	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__invite {
	margin-top: 1rem;
}

.site-footer__invite .arrow-link {
	color: var(--cream);
}

.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);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}

.site-footer__made a {
	color: inherit;
	text-decoration: underline;
}

.site-footer__made a:hover,
.site-footer__made a:focus-visible {
	color: #fdfaf5;
}

/* ---------------------------------------------------------------- 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: 700;
	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;
	}
}

/* ---------------------------------------------------------------- KKK */

.faq {
	display: grid;
	gap: 0.75rem;
	max-width: 52rem;
}

.faq-section .faq {
	margin-bottom: 1.5rem;
}

.faq__item {
	border-radius: var(--radius);
	background: var(--cream);
	box-shadow: inset 0 0 0 1px var(--line);
}

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

.entry .faq__item {
	background: var(--white);
	box-shadow: var(--shadow-soft);
}

.faq__question {
	position: relative;
	padding: 1.1rem 3.25rem 1.1rem 1.35rem;
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 2vw, 1.2rem);
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.faq__question::-webkit-details-marker {
	display: none;
}

/* A plus that turns into a minus. */
.faq__question::before,
.faq__question::after {
	content: "";
	position: absolute;
	right: 1.35rem;
	top: 50%;
	width: 0.9rem;
	height: 2px;
	border-radius: 2px;
	background: var(--ink);
	transition: transform 0.25s var(--ease);
}

.faq__question::after {
	transform: rotate(90deg);
}

.faq__item[open] > .faq__question::after {
	transform: rotate(0deg);
}

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

.faq__answer {
	padding: 0 1.35rem 1.2rem;
	color: var(--ink-soft);
}

.faq__answer p {
	margin: 0 0 0.75rem;
}

.faq__answer p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.faq__question::before,
	.faq__question::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------- included, kitchen */

.included,
.kitchen {
	margin-block: clamp(2rem, 5vw, 3rem);
	padding: clamp(1.4rem, 3vw, 2rem);
	border-radius: var(--radius-xl);
}

.included {
	background: var(--mint);
}

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

.prices__body .included h2,
.prices__body .kitchen h2 {
	margin-top: 0;
}

.kitchen h3 {
	margin: 0 0 0.6rem;
	font-size: 1.1rem;
}

.check-list,
.bring-list {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.check-list li,
.bring-list li {
	position: relative;
	padding-left: 1.9rem;
}

/* A soft round tick for what is there, a small bag dot for what to bring. */
.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%233d8b6c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}

.kitchen .check-list li::before {
	background-color: var(--mint);
}

.bring-list li::before {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: 0.45em;
	width: 0.65rem;
	height: 0.65rem;
	border-radius: 50%;
	/* On the pink card the pale pink dot vanished (since the button colour
	   went pink, #105); the button edge tone shows. */
	background: var(--action-edge);
}

/* Sooduskoodid (HILINE, VARANE): the owner's own section on lilac, each
   code its own white row with the code word first. */
.discounts {
	margin-block: clamp(2rem, 5vw, 3rem);
	padding: clamp(1.4rem, 3vw, 2rem);
	border-radius: var(--radius-xl);
	background: var(--lilac);
}

.prices__body .discounts h2 {
	margin-top: 0;
}

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

.discount-list li {
	padding: 0.85rem 1rem;
	border-radius: var(--radius);
	background: var(--white);
}

.discount-list strong {
	font-family: var(--font-display);
	letter-spacing: 0.04em;
}

.discounts p:last-child {
	margin-bottom: 0;
	font-size: 0.95rem;
}

.included__note {
	margin: 1rem 0 0;
	font-size: 0.95rem;
}

.kitchen__columns {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 48rem) {
	.included .check-list {
		grid-template-columns: 1fr 1fr;
		column-gap: 2rem;
	}

	.kitchen__columns {
		grid-template-columns: 1.6fr 1fr;
	}

	.kitchen .check-list {
		grid-template-columns: 1fr 1fr;
		column-gap: 1.5rem;
	}
}

.kitchen__column--bring {
	padding: 1.1rem 1.25rem;
	border-radius: var(--radius);
	background: var(--pink);
	align-self: start;
}

/* The map's source: a quiet "Litsents" button beside the map links, and the
   text itself in a dialog (Madis 20.09.2026). */
.map__licence-open {
	align-self: center;
	margin-left: 0.25rem;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 0.82rem;
	color: var(--ink-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.map__licence-open:hover,
.map__licence-open:focus-visible {
	color: var(--ink);
}

/* On a phone the two map buttons and "Litsents" only fit on one row when they
   are a little smaller (Madis 20.09.2026: the licence belongs on that row). */
@media (max-width: 26rem) {
	.map__link {
		padding: 0.4rem 0.62rem;
		font-size: 0.8rem;
	}

	.map__licence-open {
		margin-left: 0.1rem;
		font-size: 0.76rem;
	}

	.map__links {
		gap: 0.4rem;
	}
}

.map__licence {
	max-width: 32rem;
	border: 0;
	border-radius: 18px;
	padding: 22px 24px 18px;
	color: var(--ink);
	background: var(--cream, #fdfaf4);
	box-shadow: 0 24px 60px -24px rgba(43, 42, 39, 0.45);
}

.map__licence::backdrop {
	background: rgba(43, 42, 39, 0.45);
}

.map__licence h2 {
	margin: 0 0 10px;
	font-size: 1.15rem;
}

.map__licence p {
	margin: 0 0 10px;
	font-size: 0.95rem;
}

.map__licence-close {
	margin-top: 6px;
	border: 1px solid var(--action-edge);
	border-radius: 999px;
	padding: 8px 20px;
	font: inherit;
	color: var(--action-ink);
	background: var(--action);
	cursor: pointer;
}

/* ---------------------------------------------------------------- booking */

/* The shared plugin heads the calendar with the service's name and its
   facts ("180 min · E–N 90 €, R–P ja riigipühad 120 €"). The owner does
   not want the prices there — they may change, and the calendar shows
   the day's price anyway (21.09.2026). With one service the name says
   nothing the page title does not, so both lines go. */
.pmb-service__name,
.pmb-service__facts {
	display: none;
}

/* The plugin lays the day's times out side by side from 40 rem up, three
   narrow cards in a row; in a 14 rem card the price and "Vaba" wrap under
   the time and the price ends up floating. The owner wants them as on a
   phone: one under another, each on one line — time left, price and
   state right (21.09.2026). The theme loads before the plugin, so the
   selectors outweigh the plugin's. */
.entry__body .pmb-booking .pmb-slots {
	grid-template-columns: 1fr;
}

.pmb-booking .pmb-slot {
	flex-wrap: nowrap;
}

/* "Kui soovid mõnda muud kellaaega…" under the booking calendar. */
.booking-other-time {
	margin: 1.25rem 0 0;
	color: var(--ink-soft);
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------- invitation */

/* The invitation page is a tool, not text: the form and the A4 preview side
   by side need more than the 44rem reading width. */
.entry__body:has(.pmb-invite) {
	max-width: 72rem;
}

.entry__body .pmb-invite__form {
	flex: 1 1 26rem;
	max-width: none;
}

/* Side by side the form keeps its width and the preview takes the rest. */
@media (min-width: 56rem) {
	.entry__body .pmb-invite__form {
		flex-grow: 0;
	}
}

.entry__body .pmb-invite__preview {
	flex: 1 1 22rem;
}

/* The line over the preview ("Neli tühja kutset ühel A4 lehel.", later the
   count of invitations and sheets) is out of sight: the form's hint and
   print note already say it. Screen readers still hear the count change. */
.entry__body .pmb-invite__count {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media screen {
	/* A phone: the four cards in one row to swipe through, the next one
	   peeking in, instead of four screens of the same card. */
	@container (max-width: 36rem) {
		.entry__body .pmb-invite__sheet {
			display: flex;
			gap: 0.75rem;
			margin-inline: calc(var(--gutter, 1.25rem) * -1);
			padding: 0.25rem var(--gutter, 1.25rem) 1rem;
			overflow-x: auto;
			scroll-snap-type: x mandatory;
			scroll-padding-inline: var(--gutter, 1.25rem);
			overscroll-behavior-x: contain;
		}

		.entry__body .pmb-invite__sheet > .pmb-invite__page {
			display: contents;
		}

		.entry__body .pmb-invite__sheet .pmb-invite-card {
			flex: 0 0 min(84%, 22rem);
			border-width: 0;
			border-radius: var(--pmb-radius-small);
			box-shadow: var(--pmb-shadow);
			scroll-snap-align: start;
		}

		.entry__body .pmb-invite__sheet .pmb-invite-card:not(:last-child),
		.entry__body .pmb-invite__sheet .pmb-invite-card:nth-child(odd) {
			border-width: 0;
		}
	}
}

@media (max-width: 40rem) {
	.entry__body .pmb-invite__print {
		justify-self: stretch;
	}
}