@font-face { font-family: "Manrope"; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/manrope-greek-300-normal.woff2) format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/manrope-latin-300-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/manrope-greek-400-normal.woff2) format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/manrope-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/eb-garamond-greek-400-normal.woff2) format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/eb-garamond-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/eb-garamond-greek-500-normal.woff2) format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/eb-garamond-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/eb-garamond-greek-400-italic.woff2) format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/eb-garamond-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }

:root {
  /* Ground and ink: the white plaster and dark window frames of the room */
  /* A light, quiet palette: warm off-white ground, one shared dark ink,
     pale mist for therapy, pale sage for yoga, a touch of clay */
  --bg: #f7f4ed;
  --surface: #efebe3;
  --paper: #fcfbf8;
  --ink: #303834;
  --muted: #5b6466;
  --ink-hover: #3c4749;
  --accent: #e9dec9;
  --therapy: #31565b;        /* therapy text */
  --therapy-field: #afc9cc;  /* therapy colour */
  --therapy-soft: #e3eced;   /* therapy wash */
  --ku: #53674f;             /* yoga text */
  --ku-field: #c9d5bd;       /* yoga colour */
  --ku-soft: #eaefe3;        /* yoga wash */

  /* soft frames: three squircle radii, used by size, plus pills for buttons */
  --r-hero: 48px;   /* hero pictures and large panels */
  --r-card: 28px;   /* service cards and boxes */
  --r-small: 18px;  /* small pictures and chips */
  --r-pill: 999px;

  --step-small: 0.875rem;
  --step-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
  --step-head: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
  --step-display: clamp(2.75rem, 1.2rem + 4.6vw, 5.5rem);

  --gutter: 12px;
  --pad: clamp(24px, 4.4vw, 72px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --ui: "Manrope", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--therapy-field); color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.tnum { font-variant-numeric: lining-nums tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--bg); padding: 10px 16px; z-index: 50; }
.skip:focus { top: 12px; }

/* ---------- buttons: square, flat, one shape ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 26px;
  font: inherit; font-size: var(--step-body); line-height: 1.2; text-decoration: none;
  border: 0; cursor: pointer;
  background: var(--ink); color: var(--bg);
  transition: transform 0.4s var(--ease), background-color 0.3s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:hover, .btn--therapy:hover, .btn--ku:hover { background: var(--ink-hover); }
.btn--paper { background: var(--paper); color: var(--ku); }
.btn--paper:hover { background: #fff; }
.arrow { width: 18px; height: 12px; flex: none; transition: transform 0.4s var(--ease); }
.btn:hover .arrow, .door:hover .arrow { transform: translateX(4px); }

/* ---------- top bar (blog and article pages) ---------- */
.bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 20px var(--pad); gap: 24px;
}
.bar .links { display: flex; gap: 28px; font-size: var(--step-body); }
.bar .links a { text-decoration: none; }
.bar .links a:hover, .bar .links a[aria-current] { text-decoration: underline; }
.bar .links--end { justify-content: flex-end; }
.wordmark { font-size: 1.5rem; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.wordmark em { font-style: italic; }
.menu-btn {
  display: none; justify-self: end; align-items: center; gap: 10px;
  font: inherit; font-size: var(--step-body); color: inherit; background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer;
}
.menu-btn { width: 44px; justify-content: flex-end; }
.menu-btn svg { width: 24px; height: 10px; }

/* ---------- phone menu ---------- */
.menu {
  border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  background: var(--bg); color: var(--ink);
}
.menu::backdrop { background: rgba(29, 40, 38, 0.4); }
.menu[open] { display: flex; flex-direction: column; animation: menu-in 0.45s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } }
.menu-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; }
.menu-close { font: inherit; font-size: var(--step-body); background: none; border: 0; color: inherit; min-height: 44px; padding: 0; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.menu-close svg { width: 16px; height: 16px; }
.menu nav { display: flex; flex-direction: column; padding: 24px; gap: 4px; }
.menu nav a { font-size: 2.25rem; line-height: 1.2; text-decoration: none; padding: 6px 0; }
.menu nav a small { display: block; font-size: var(--step-body); color: var(--muted); }
.menu-foot { margin-top: auto; padding: 24px; display: grid; gap: 10px; }
.menu-foot .btn { width: 100%; }

/* ---------- the split stage ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter);
  padding: var(--gutter);
}
.read { background: var(--paper); min-width: 0; position: relative; z-index: 1; }
.stage {
  position: sticky; top: var(--gutter);
  height: calc(100svh - 2 * var(--gutter));
  overflow: hidden; background: var(--surface);
}
.stage figure { margin: 0; position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.stage figure.is-on { opacity: 1; }
.stage picture { display: contents; }
.stage img { width: 100%; height: 100%; object-fit: cover; }
.stage figure.is-on img { animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1%, -1%); } }
.stage-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  min-height: 56px; padding: 14px 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--paper); font-size: 1rem;
}
.stage-bar span:last-child { text-align: right; }
.stage-bar .what { transition: opacity 0.6s; }

/* hero sheet */
.hero {
  min-height: calc(100svh - 2 * var(--gutter));
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 22px var(--pad) var(--pad);
  text-align: center;
}
.hero-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; font-size: var(--step-body); }
.hero-nav .side { display: flex; gap: 24px; }
.hero-nav .side--end { justify-content: flex-end; }
.hero-nav a:not(.wordmark) { text-decoration: none; white-space: nowrap; }
.hero-nav a:not(.wordmark):hover { text-decoration: underline; }
.hero-body { align-self: center; padding-top: 6vh; }
.hero h1 { font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.03em; }
.hero h1 span { display: block; }
.hero-lede { max-width: 34ch; margin: 36px auto 0; font-size: var(--step-lead); line-height: 1.35; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 48px; text-align: left; }
.door {
  display: grid; align-content: space-between; gap: 22px; min-height: 148px; padding: 20px 22px;
  text-decoration: none; transition: transform 0.5s var(--ease), background-color 0.3s;
}
.door:hover { transform: translateY(-3px); }
.door b { font-weight: 400; font-size: 2.25rem; line-height: 1; letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: center; }
.door span { font-size: var(--step-body); line-height: 1.35; }
.door--therapy { background: var(--therapy-field); color: var(--ink); }
.door--ku { background: var(--ku-field); color: var(--ink); }
.door:hover { filter: brightness(0.97); }

/* reading sections */
.sec { padding: clamp(96px, 12vw, 176px) var(--pad) 0; }
.sec:last-child { padding-bottom: clamp(96px, 12vw, 176px); }
.sec h2 { font-size: var(--step-head); }
.measure { max-width: 46ch; }
.intro .measure { margin-top: 36px; display: grid; gap: 1.1em; }
.intro p:first-child { font-weight: 500; font-size: var(--step-lead); line-height: 1.35; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 48px; }
.pair > div { padding: 22px; }
.pair h3 { font-size: 1.5rem; margin-bottom: 10px; }
.pair p { font-size: var(--step-body); line-height: 1.45; }
.pair .t { background: var(--therapy-soft); }
.pair .k { background: var(--ku-soft); }
.pair a { display: inline-block; margin-top: 14px; }

.lead { font-size: var(--step-lead); line-height: 1.35; margin-top: 28px; max-width: 34ch; }

/* therapy tabs */
.tabs { display: flex; gap: 28px; margin-top: 56px; font-size: 1.5rem; flex-wrap: wrap; }
.tabs button {
  font: inherit; color: var(--muted); background: none; border: 0; padding: 6px 0; cursor: pointer;
  min-height: 44px; position: relative;
}
.tabs button[aria-selected="true"] { color: var(--therapy); }
.tabs button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--therapy);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.tabs button:hover { color: var(--ink); }
.panel { margin-top: 28px; min-height: 13em; }
.panel h3 { font-size: 2.25rem; color: var(--therapy); }
.panel p { margin-top: 20px; max-width: 42ch; }
.panel[hidden] { display: none; }
.panel:not([hidden]) { animation: panel-in 0.6s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
.cells { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 40px; }
.cells .btn { min-height: 72px; justify-content: space-between; padding: 0 22px; }
.cells .btn--quiet { background: var(--therapy-soft); color: var(--ink); }
.cells .btn--quiet:hover { background: var(--therapy-field); }

.topics { margin-top: 88px; }
.topics h2, .topics h3, .steps h2 { font-size: 2.25rem; }
.topics dl { margin: 28px 0 0; display: grid; grid-template-columns: minmax(0, 15ch) 1fr; gap: 18px 32px; }
.topics dt { font-size: 1.5rem; line-height: 1.3; color: var(--therapy); }
.topics dd { margin: 0; font-size: var(--step-body); line-height: 1.45; }
.steps { margin-top: 88px; padding: 32px; background: var(--therapy-soft); color: var(--ink); }
.steps ol { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 8.5ch 1fr; gap: 16px; font-size: var(--step-body); line-height: 1.45; }
.steps li b { font-weight: 400; font-style: italic; color: var(--therapy); }
.steps p.small { margin-top: 24px; font-size: 1rem; color: var(--muted); }

/* letter */
.letter .measure { margin-top: 36px; display: grid; gap: 1em; }
.letter blockquote {
  margin: 12px 0; font-size: var(--step-lead); line-height: 1.32; font-style: italic; color: var(--therapy);
  max-width: 34ch;
}
.letter blockquote footer { font-style: normal; font-size: 1rem; color: var(--muted); margin-top: 12px; }
.sign { margin-top: 20px; }
.sign b { display: block; font-weight: 400; font-style: italic; font-size: 2.25rem; line-height: 1.1; }
.sign span { font-size: 1rem; color: var(--muted); }

/* ---------- Ku band: full width, sage wash ---------- */
.ku {
  background: var(--ku-soft); color: var(--ink);
  margin: 0 var(--gutter);
  padding: clamp(80px, 10vw, 160px) var(--pad);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
}
.ku-head { grid-column: 1 / 7; }
.ku h2 { font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.03em; }
.ku .lead { max-width: 30ch; }
.ku a:not(.btn) { color: inherit; }
.next {
  margin-top: 56px; padding: 28px; background: var(--ku-field); color: var(--ink);
  display: grid; gap: 6px; max-width: 520px;
}
.next h3 { font-size: 1.5rem; font-style: italic; color: var(--ku); }
.next .when { font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.02em; margin-top: 4px; }
.next .what { font-size: var(--step-body); }
.next .btn { margin-top: 18px; justify-self: start; }
.events { margin-top: 64px; max-width: 520px; }
.events h2 { font-size: 2.25rem; }
.events ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 28px; }
.events li b { display: block; font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.events li span { display: block; font-size: var(--step-body); line-height: 1.45; color: var(--muted); }
.events li .date { color: var(--ku); font-style: italic; margin-top: 4px; }
.note { margin-top: 48px; max-width: 46ch; font-size: 1rem; line-height: 1.5; color: var(--muted); }

.sheet {
  grid-column: 8 / 13; grid-row: 1 / 3; align-self: start;
  background: var(--paper); color: var(--ink);
  padding: 56px 48px 64px; text-align: center;
  /* scalloped paper edge: a mask, not a fill */
  --sc: radial-gradient(circle at 50% 0, transparent 8px, #000 8.5px) top / 22px 51% repeat-x, radial-gradient(circle at 50% 100%, transparent 8px, #000 8.5px) bottom / 22px 51% repeat-x; /* taste-skill-ignore */
  -webkit-mask: var(--sc); mask: var(--sc);
}
.sheet h3 { font-size: 2.25rem; margin-top: 18px; }
.sheet > p { font-size: 1rem; color: var(--muted); margin-top: 6px; }
.sheet .where { margin-top: 44px; font-size: 1rem; line-height: 1.45; }

.ku-photos {
  grid-column: 1 / 13; margin-top: clamp(80px, 9vw, 140px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end;
}
.ku-photos figure { margin: 0; }
.ku-photos img { width: 100%; object-fit: cover; }
.ku-photos figcaption { font-size: 1rem; margin-top: 10px; color: var(--muted); }
.ku-photos .p1 { grid-column: 1 / 8; }
.ku-photos .p1 img { aspect-ratio: 3 / 2; }
.ku-photos .p2 { grid-column: 9 / 13; }
.ku-photos .p2 img { aspect-ratio: 4 / 5; }
.ku-photos .p3 { grid-column: 3 / 7; margin-top: 40px; }
.ku-photos .p3 img { aspect-ratio: 1; }
.ku-photos .p4 { grid-column: 8 / 11; margin-top: 40px; align-self: start; }
.ku-photos .p4 img { aspect-ratio: 9 / 14; }

/* ---------- FAQ ---------- */
.faq {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding: clamp(96px, 12vw, 176px) calc(var(--pad) + var(--gutter)) clamp(96px, 12vw, 176px);
}
.faq-text { grid-column: 1 / 7; }
.faq h2 { font-size: var(--step-head); }
.facts { margin-top: 28px; display: grid; gap: 4px; font-size: var(--step-body); }
.facts a { text-decoration: none; }
.facts a:hover { text-decoration: underline; }
.qa { margin-top: 48px; display: grid; gap: 22px; }
.qa details summary {
  list-style: none; cursor: pointer; font-size: 1.5rem; line-height: 1.25;
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline; min-height: 44px; padding-top: 6px;
}
.qa details summary::-webkit-details-marker { display: none; }
.qa summary i { flex: none; width: 12px; height: 12px; position: relative; top: -2px; transition: transform 0.4s var(--ease); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: currentColor; }
.qa summary i::after { transform: rotate(90deg); transition: transform 0.4s var(--ease); }
.qa details[open] summary i::after { transform: rotate(0); }
.qa summary .tag { font-size: 1rem; color: var(--muted); font-style: italic; }
.qa details p { margin-top: 10px; font-size: var(--step-body); color: var(--muted); max-width: 46ch; }
.faq .actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; margin-top: 48px; }
.faq-pics { grid-column: 8 / 13; position: relative; padding-bottom: 80px; }
.faq-pics .tall { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.faq-pics .sq { position: absolute; left: -40px; bottom: 0; width: 46%; aspect-ratio: 1; object-fit: cover; border: 10px solid var(--bg); }

/* ---------- contact: visit card on a photograph ---------- */
.visit { position: relative; margin: 0 var(--gutter); min-height: 100svh; }
.visit > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card {
  position: absolute; top: 60px; right: 60px;
  width: 420px; max-width: calc(100% - 32px); background: var(--paper); padding: 32px; z-index: 1;
}
.visit-inner { position: static; }
.card h2 { font-size: 2.25rem; }
.card address { font-style: normal; margin-top: 16px; font-size: var(--step-body); line-height: 1.4; }
.card dl { margin: 22px 0 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: var(--step-body); }
.card dt { color: var(--muted); }
.card dd { margin: 0; text-align: right; }
.card .reach { margin-top: 22px; display: grid; gap: 2px; font-size: var(--step-body); }
.card .reach a { text-decoration: none; }
.card .reach a:hover { text-decoration: underline; }
.card .map { display: inline-block; margin-top: 14px; font-size: var(--step-body); }
.visit .cap { position: absolute; left: 24px; bottom: 20px; background: var(--accent); color: var(--ink); padding: 6px 12px; font-size: 1rem; z-index: 1; }

/* ---------- footer: a quiet line ---------- */
.foot {
  margin-top: 30svh; padding: 0 calc(var(--pad) + var(--gutter)) 30px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: end; font-size: 1rem;
}
.foot .mid { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.foot .end { text-align: right; color: var(--muted); }
.foot .start { color: var(--muted); }

/* ---------- blog and article ---------- */
.page-head { padding: clamp(64px, 9vw, 140px) var(--pad) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; grid-template-rows: auto 1fr; }
.page-head h1 { grid-column: 1 / 8; font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.03em; }
.page-head p { grid-column: 1 / 7; align-self: start; margin-top: 28px; font-size: var(--step-lead); line-height: 1.35; }
.page-head .head-fig { grid-column: 9 / 13; grid-row: 1 / 3; margin: 0; align-self: end; }
.page-head .head-fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.prose figure { margin: 1.4em 0; }
.prose figure img { width: 60%; aspect-ratio: 4 / 5; object-fit: cover; }
.prose figcaption { font-size: 1rem; color: var(--muted); margin-top: 8px; }
.post-list { padding: clamp(64px, 8vw, 120px) var(--pad) 0; }
.post {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end;
  text-decoration: none; color: inherit;
}
.post figure { grid-column: 1 / 7; margin: 0; overflow: hidden; }
.post figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
.post:hover figure img { transform: scale(1.03); }
.post .txt { grid-column: 8 / 13; padding-bottom: 8px; }
.post time { display: block; font-size: var(--step-body); color: var(--muted); font-style: italic; }
.post h2 { font-size: var(--step-head); margin-top: 14px; }
.post .sub { margin-top: 8px; font-size: var(--step-lead); line-height: 1.3; }
.post .ex { margin-top: 20px; font-size: var(--step-body); }
.post .post-more { display: inline-flex; gap: 10px; align-items: center; margin-top: 24px; text-decoration: underline; text-underline-offset: 0.2em; }
.post:hover .arrow { transform: translateX(4px); }

.crossroads {
  margin: clamp(96px, 12vw, 176px) var(--gutter) 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter);
}
.crossroads a { display: grid; gap: 18px; align-content: start; padding: 0 0 var(--pad); overflow: hidden; text-decoration: none; transition: transform 0.5s var(--ease); }
.crossroads a:hover { transform: translateY(-3px); }
.crossroads img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 18px; transition: transform 1.2s var(--ease); }
.crossroads a:hover img { transform: scale(1.03); }
.crossroads b, .crossroads span { margin: 0 var(--pad); }
.crossroads b { font-weight: 400; font-size: var(--step-head); line-height: 1.05; letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.crossroads span { font-size: var(--step-body); max-width: 36ch; }
.crossroads h2 { grid-column: 1 / -1; font-size: 2.25rem; padding: 0 var(--pad) 16px; }
.crossroads .t { background: var(--therapy-field); color: var(--ink); }
.crossroads .k { background: var(--ku-field); color: var(--ink); }

.article { padding: clamp(56px, 8vw, 120px) var(--pad) 0; }
.article header { max-width: 980px; margin: 0 auto; text-align: center; }
.article h1 { font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.03em; }
.article .sub { margin-top: 18px; font-size: var(--step-lead); font-style: italic; }
.article .meta { margin-top: 26px; font-size: var(--step-body); color: var(--muted); }
.article > figure { margin: clamp(48px, 6vw, 88px) auto 0; max-width: 1180px; }
.article > figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.article > figure figcaption { font-size: 1rem; color: var(--muted); margin-top: 10px; }
.prose { max-width: 66ch; margin: clamp(56px, 7vw, 96px) auto 0; display: grid; gap: 1.15em; font-size: var(--step-body); line-height: 1.6; }
.prose p:first-child::first-letter { float: left; font-size: 4.4em; line-height: 0.82; padding: 0.06em 0.08em 0 0; color: var(--therapy); }
.prose blockquote { margin: 0.6em 0; font-size: var(--step-lead); line-height: 1.32; font-style: italic; color: var(--therapy); }
.refs { max-width: 66ch; margin: 64px auto 0; padding: 32px; background: var(--accent); font-size: 1rem; line-height: 1.5; }
.refs h2 { font-size: 1.5rem; margin-bottom: 14px; }
.refs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.refs a { word-break: break-all; }
.byline { max-width: 66ch; margin: 40px auto 0; font-style: italic; font-size: var(--step-body); }

/* ---------- motion: entrances ---------- */
.js [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js [data-reveal].is-in > * { opacity: 1; transform: none; }
.js [data-reveal].is-in > *:nth-child(2) { transition-delay: 80ms; }
.js [data-reveal].is-in > *:nth-child(3) { transition-delay: 160ms; }
.js [data-reveal].is-in > *:nth-child(4) { transition-delay: 240ms; }
.js [data-reveal].is-in > *:nth-child(5) { transition-delay: 320ms; }
.js [data-reveal].is-in > *:nth-child(n+6) { transition-delay: 400ms; }
/* The emblem logo blends into the page with multiply. A fading or moving parent
   becomes its own layer, and the logo's paper shows as a white box until the fade ends.
   So the emblem does not take part in the entrance. */
.js [data-reveal] > .emblem { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] > * { opacity: 1; transform: none; }
}

/* ---------- tablet and phone ---------- */
@media (max-width: 1100px) {
  .hero-nav .side { gap: 18px; font-size: var(--step-body); }
  .doors { grid-template-columns: 1fr; }
  .door { min-height: 112px; }
  .pair, .cells { grid-template-columns: 1fr; }
  .ku-head { grid-column: 1 / 13; }
  .sheet { grid-column: 1 / 13; grid-row: auto; margin-top: 72px; justify-self: center; width: min(640px, 100%); }
  .faq-text { grid-column: 1 / 13; }
  .faq-pics { grid-column: 1 / 13; grid-row: 1; margin-bottom: 72px; max-width: 640px; }
  .faq-pics .sq { left: auto; right: -12px; }
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .stage { order: -1; position: sticky; top: var(--gutter); height: 56svh; z-index: 0; }
  .read { margin-top: -8svh; }
  .stage-bar { font-size: 1rem; padding: 12px 16px; }
  .hero { min-height: 0; padding-top: 22px; }
  .hero-body { padding: 56px 0 8px; }
  .hero-nav { grid-template-columns: 1fr auto; }
  .hero-nav .side { display: none; }
  .hero-nav .wordmark { justify-self: start; }
  .menu-btn { display: inline-flex; }
  .bar { grid-template-columns: 1fr auto; padding: 16px 24px; }
  .bar .links { display: none; }
  .bar .wordmark { justify-self: start; }
  .doors { grid-template-columns: 1fr 1fr; }
  .post figure, .post .txt { grid-column: 1 / 13; }
  .post .txt { margin-top: 28px; }
  .page-head h1, .page-head p { grid-column: 1 / 13; }
  .page-head .head-fig { grid-column: 5 / 13; grid-row: auto; margin-top: 40px; }
  .prose figure img { width: 100%; }
  .crossroads { grid-template-columns: 1fr; }
  .card { margin: 0 auto; position: relative; top: auto; right: auto; }
  .visit { min-height: 0; display: grid; }
  .visit > img { position: relative; height: 70svh; }
  .visit-inner { margin-top: -80px; padding: 0 0 0; }
  .visit .cap { top: 16px; bottom: auto; }
  .foot { grid-template-columns: 1fr; gap: 8px; margin-top: 20svh; align-items: start; }
  .foot .mid { justify-content: flex-start; }
  .foot .end { text-align: left; }
}

@media (max-width: 560px) {
  :root { --pad: 24px; }
  .doors { grid-template-columns: 1fr; }
  .tabs { gap: 20px; font-size: var(--step-body); }
  .topics dl { grid-template-columns: 1fr; gap: 4px; }
  .topics dd { margin-bottom: 14px; }
  .steps { padding: 24px; margin-left: -12px; margin-right: -12px; }
  .steps li { grid-template-columns: 1fr; gap: 2px; }
  .ku { padding: 80px 20px; }
  .sheet { padding: 44px 24px 52px; margin-left: -10px; margin-right: -10px; width: auto; }
  .ku-photos .p1 { grid-column: 1 / 13; }
  .ku-photos .p2 { grid-column: 1 / 8; }
  .ku-photos .p3 { grid-column: 6 / 13; margin-top: -20%; }
  .ku-photos .p4 { display: none; }
  .faq { padding-left: 24px; padding-right: 24px; }
  .faq-pics .tall { aspect-ratio: 4 / 5; }
  .faq-pics .sq { width: 38%; right: -8px; }
  .card { width: auto; max-width: none; margin: 0 16px; padding: 24px; }
  .refs { padding: 24px; }
}

/* ---------- wayfinding in Manrope, the practice's own face ---------- */
.bar .links, .hero-nav .side, .btn, .door span, .stage-bar, .tabs button, .menu nav small, .menu-close,
.foot, .foot-contact, figcaption, .cap, .facts, .card dl, .card .reach, .card .map, .sheet > p, .sheet .where,
.article .meta, .post time, .post .post-more, .pair a, .share, .more-posts time, .events .date, .letter blockquote footer, .sign span {
  font-family: var(--ui); font-weight: 300; font-style: normal; letter-spacing: 0;
}
.btn, .door span { font-weight: 400; }
.hero-nav .side, .bar .links { font-size: 1.125rem; }
.btn { font-size: 1rem; }

.foot-contact {
  margin-top: 30svh; padding: 0 calc(var(--pad) + var(--gutter));
  display: grid; grid-template-columns: 1fr 1fr 1.4fr 1.4fr; gap: 24px 40px; font-size: 1.125rem; line-height: 1.4;
}
.foot-contact span { display: block; color: var(--muted); font-size: 1rem; }
.foot-contact a { text-decoration: none; }
.foot-contact a:hover { text-decoration: underline; }
.foot { margin-top: 56px; grid-template-columns: 1fr auto; }
.foot .mid { justify-content: flex-start; gap: 8px 24px; }
.sign h3 { font-weight: 400; font-style: italic; font-size: 2.25rem; line-height: 1.1; }
.sign span { display: block; font-size: 1rem; color: var(--muted); margin-top: 4px; }
.article h1 .sub { display: block; font-size: var(--step-lead); letter-spacing: 0; margin-top: 18px; line-height: 1.3; }
.share, .more-posts { max-width: 66ch; margin: 48px auto 0; }
.share h3 { font-size: 1.5rem; }
.share ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 12px; }
.share ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--accent); text-decoration: none; }
.share ul a:hover { background: var(--therapy-soft); }
.share .tags { margin-top: 16px; }
.more-posts { margin-top: 96px; }
.more-posts h2 { font-size: 2.25rem; }
.more-posts ul { list-style: none; padding: 0; margin: 20px 0 0; }
.more-posts li { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 14px 0; }
.more-posts li a { font-size: 1.5rem; line-height: 1.25; text-decoration: none; }
.more-posts li a:hover { text-decoration: underline; }
.more-posts time { white-space: nowrap; color: var(--muted); font-size: 1rem; }
@media (max-width: 900px) {
  .foot-contact { grid-template-columns: 1fr 1fr; margin-top: 20svh; }
  .foot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .foot-contact { grid-template-columns: 1fr; gap: 14px; }
  .more-posts li { flex-direction: column; gap: 4px; }
}

/* ---------- Ku logo, taken from Ku's Instagram, set into each ground ---------- */
.logo-dark { filter: grayscale(1) contrast(1.8) brightness(1.16); mix-blend-mode: multiply; }
.logo-light { filter: grayscale(1) contrast(1.8) brightness(1.16) invert(1); mix-blend-mode: screen; }
.ku-head { isolation: isolate; }
.ku-logo { width: 104px; margin-bottom: 36px; }
.door--ku { isolation: isolate; }
.door-name { display: inline-flex; align-items: center; gap: 12px; }
.door-logo { width: 26px; height: auto; }
/* the footer signs off with the Ku symbol above the practice name; the other columns line up with the name */
.foot-contact { grid-template-columns: 1.2fr 1fr 1.4fr 1.4fr; align-items: end; }
.foot-ku { display: inline-block; margin-bottom: 16px; }
.foot-ku img { width: 72px; }

/* ---------- italic weight on the words that carry the idea ---------- */
h1 em, h2 em { font-style: italic; }

/* ---------- arrow links ---------- */
.go { text-decoration: none; display: inline-flex; gap: 8px; }
.go:hover { text-decoration: underline; }
.go span { transition: transform 0.4s var(--ease); }
.go:hover span { transform: translateX(4px); }

/* ---------- "Ας μιλήσουμε": the one action in every header ---------- */
.talk {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--ink); color: var(--bg) !important; text-decoration: none !important;
  font-family: var(--ui); font-weight: 400; font-size: 1rem; white-space: nowrap;
  transition: transform 0.4s var(--ease), background-color 0.3s;
}
.talk:hover { background: var(--ink-hover); transform: translateY(-2px); }
.hero-nav .side--end, .bar .links--end { align-items: center; }
.talk--phone { display: none; }
.phone-end { display: none; }

/* ---------- topic shapes ---------- */
.shape { width: 18px; height: 18px; flex: none; fill: currentColor; }
.topics dt { display: flex; gap: 12px; align-items: baseline; }
.topics dt .shape { position: relative; top: 2px; color: var(--therapy); opacity: 0.85; }

@media (max-width: 900px) {
  .talk--phone { display: inline-flex; min-height: 40px; padding: 0 14px; }
  .phone-end { display: flex; align-items: center; gap: 14px; justify-self: end; }
  .bar { grid-template-columns: 1fr auto auto; }
  .foot-contact { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot-contact { grid-template-columns: 1fr; }
  .ku-logo { width: 84px; }
}

/* ---------- Ku wordmark: the house mark from the logo ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 10px; isolation: isolate; }
.wordmark img { width: 30px; height: auto; }
.wordmark small { font-family: var(--ui); font-weight: 300; font-size: 0.875rem; letter-spacing: 0; margin-left: 2px; color: var(--muted); align-self: flex-end; padding-bottom: 5px; }

/* ---------- the emblem: roots below, branches above ---------- */
.emblem {
  margin: 56px 0 0; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr 1fr;
  column-gap: 20px; align-items: center; isolation: isolate;
}
.emblem img { grid-column: 2; grid-row: 1 / 3; width: 180px; }
.emblem a { display: grid; gap: 2px; text-decoration: none; font-family: var(--ui); font-weight: 300; font-size: 1rem; line-height: 1.35; }
.emblem a b { font-family: var(--font); font-weight: 400; font-size: 1.5rem; }
.emblem a i { font-style: normal; display: inline-block; transition: transform 0.4s var(--ease); }
.emblem a:hover i { transform: translateX(4px); }
/* the service name leads, the roots/branches metaphor follows in italic */
.emblem a em { font-family: var(--font); font-size: 1.0625rem; }
.emblem-k { grid-column: 3; grid-row: 1; align-self: start; color: var(--ku); padding-top: 18px; }
.emblem-t { grid-column: 1; grid-row: 2; align-self: end; text-align: right; color: var(--therapy); padding-bottom: 6px; }
@media (max-width: 560px) {
  .emblem { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 16px; justify-items: center; text-align: center; }
  .emblem img { grid-column: 1; grid-row: 2; width: 150px; }
  .emblem-k { grid-column: 1; grid-row: 1; padding: 0; }
  .emblem-t { grid-column: 1; grid-row: 3; text-align: center; padding: 0; }
}
@media (max-width: 900px) { .wordmark small { display: none; } }

/* the hero sheet is narrow: the house mark and name are enough there */
.hero-nav .wordmark small { display: none; }

/* a tone shows while a picture loads */
img:not(.logo-dark):not(.logo-light) { background: var(--surface); }

/* ---------- hero: the practical line, straight after the headline ---------- */
.hero-plain { margin: 28px auto 0; font-family: var(--ui); font-weight: 400; font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; }
.hero-lede { margin-top: 10px; }

/* ---------- therapy: practical details ---------- */
.prac-h { font-size: 1.5rem; margin-top: 32px; }
.prac { margin: 14px 0 0; display: grid; grid-template-columns: minmax(0, 14ch) 1fr; gap: 12px 20px; font-size: 1.0625rem; line-height: 1.45; }
.prac dt { color: var(--therapy); font-style: italic; }
.prac dd { margin: 0; }

/* ---------- small text, one step larger for easier reading ---------- */
figcaption, .ku-photos figcaption, .note, .foot, .foot-contact span, .sheet > p, .sheet .where,
.stage-bar, .card dl, .facts, .more-posts time, .article .meta { font-size: 1.0625rem; }
.foot-contact { gap: 32px 48px; }
.foot { margin-top: 72px; padding-bottom: 40px; row-gap: 16px; }
.bar-phone { display: none; }

@media (max-width: 900px) {
  .stage { height: 38svh; }
  .read { margin-top: -4svh; }
  .stage-bar .what, .stage-bar span:last-child:not(.bar-phone) { display: none; }
  .stage-bar .bar-phone { display: block; font-size: 1.0625rem; }
  .stage-bar { justify-content: flex-start; }
}

/* ---------- home: plainer hero ---------- */
.hero h1 { font-size: clamp(2.5rem, 1rem + 3.4vw, 4rem); line-height: 1.02; max-width: 15ch; margin: 0 auto; }
.hero-lede { margin-top: 28px; }
.meet { margin-top: 28px; }
.intro .lead { max-width: 30ch; }
.ku-photos--two .p2 { grid-column: 9 / 13; }
.ku .next { margin-top: 40px; }
.ku .lead { margin-top: 40px; }

/* ---------- bio page ---------- */
.bio-body { max-width: 760px; margin: clamp(80px, 9vw, 140px) auto 0; padding: 0 var(--pad); }
.bio-body h2 { font-size: var(--step-head); }
.bio-body .topics { margin-top: 0; }

/* ---------- light palette: dark ink only for type and buttons ---------- */
.ku h2 em { color: var(--ku); }

.hero h1 { max-width: none; font-size: clamp(2.25rem, 0.8rem + 3vw, 3.25rem); }
.hero h1 span { display: block; }

/* the logo sits straight on the paper: no isolated layer, so its paper ground melts away */
.emblem, .wordmark, .ku-head, .door--ku { isolation: auto; }
@media (max-width: 560px) {
  .ku-photos--two .p1 { grid-column: 1 / 13; }
  .ku-photos--two .p2 { grid-column: 1 / 9; margin-top: 8px; }
}

/* ---------- front door routes ---------- */
.doors--routes .door { min-height: 190px; }
.doors--routes .door b { font-size: 1.875rem; }
.doors--routes .door span { font-size: 1.0625rem; }

/* ---------- service pages ---------- */
.split--page { padding-top: 0; }
.sec.page-top { padding-top: clamp(56px, 7vw, 104px); }
.page-top h1 { font-size: var(--step-display); line-height: 1; letter-spacing: -0.03em; }
.page-cta { margin-top: 36px; }
.sec > h2 + .tabs { margin-top: 28px; }
.approach { display: grid; gap: 1em; }
.approach p { max-width: 46ch; }
.creds { margin: 12px 0 8px; display: grid; grid-template-columns: minmax(0, 11ch) 1fr; gap: 10px 20px; font-size: 1.0625rem; }
.creds dt { color: var(--therapy); font-style: italic; }
.creds dd { margin: 0; }
.sec .steps { margin-top: 0; }
.sec .qa { margin-top: 32px; }
.end-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 48px; }

.ku h1 { font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.03em; }
.ku--page { margin-top: 0; }
.next-h { font-size: 1.5rem; font-style: italic; color: var(--ku); }
.sheet h2 { font-size: 2.25rem; margin-top: 18px; }
.levels { margin-top: 56px; max-width: 520px; }
.levels h2, .events h2 { font-size: 2.25rem; }
.levels dl { margin: 18px 0 0; display: grid; grid-template-columns: minmax(0, 13ch) 1fr; gap: 12px 20px; }
.levels dt { color: var(--ku); font-style: italic; font-size: 1.25rem; }
.levels dd { margin: 0; font-size: 1.0625rem; line-height: 1.45; }
.faq--short .note { margin-top: 32px; }

.page-head .contact-routes { grid-column: 1 / 13; margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.contact-routes .door { min-height: 170px; }
.page-head--contact + .visit { margin-top: clamp(64px, 8vw, 120px); }

@media (max-width: 900px) {
  .split--page .stage { height: 34svh; }
}
@media (max-width: 560px) {
  .page-head .contact-routes { grid-template-columns: 1fr; }
  .doors--routes .door { min-height: 150px; }
  .doors--routes .door b { font-size: 1.5rem; }
  .levels dl, .creds { grid-template-columns: 1fr; gap: 2px; }
  .levels dd, .creds dd { margin-bottom: 12px; }
}

.ku .next-h { font-size: 1.5rem; line-height: 1.2; letter-spacing: 0; }
.ku .sheet h2 { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.01em; }
.ku .levels h2, .ku .events h2 { font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.01em; }
.faq--short { padding-top: clamp(80px, 8vw, 120px); }
.page-head--contact .head-fig img { aspect-ratio: 4 / 3; }

/* ---------- soft frames: squircle radii, used by size ---------- */
/* hero pictures and large panels */
.stage, .read, .ku, .visit, .visit > img, .page-head .head-fig img, .article > figure img, .post figure { border-radius: var(--r-hero); }
.stage { overflow: hidden; isolation: isolate; }
.read { overflow: clip; }
.visit { overflow: hidden; }
/* service cards and boxes */
.door, .crossroads a, .steps, .next, .card, .refs, .faq-pics .tall, .crossroads img, .doors--routes .door img, .sheet, .contact-routes .door { border-radius: var(--r-card); }
.sheet { -webkit-mask: none; mask: none; }
/* small pictures and chips */
.ku-photos img, .faq-pics .sq, .prose figure img, .share ul a, .visit .cap, .stage-bar { border-radius: var(--r-small); }
/* buttons: soft pills */
.btn, .talk, .menu-foot .btn, .cells .btn { border-radius: var(--r-pill); }
.cells .btn { min-height: 60px; }

/* the bar inside the hero picture floats as a soft chip */
.stage-bar { left: 14px; right: 14px; bottom: 14px; }

/* ---------- home: two service cards, each a framed picture with its name, one line and its action ---------- */
.doors--routes { gap: 16px; }
.doors--routes .door { grid-template-rows: auto auto 1fr auto; align-content: start; padding: 12px 12px 22px; gap: 0; }
.doors--routes .door img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-small); margin-bottom: 18px; }
.doors--routes .door--therapy img { object-position: 50% 70%; }
.doors--routes .door b, .doors--routes .door span { padding: 0 10px; }
.doors--routes .door span { margin-top: 8px; }
.doors--routes .door .door-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  font-size: 1rem; font-weight: 400; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px;
}
.doors--routes .door:hover .door-cta { text-decoration-thickness: 2px; }

/* home on a phone: headline and service cards first, no large picture before them */
@media (max-width: 900px) {
  .split--home .stage { display: none; }
  .split--home .read { margin-top: 0; }
}

/* the contact picture is inset, not full-bleed */
.visit { margin: 0 var(--pad); }
@media (max-width: 900px) {
  .visit { margin: 0 var(--gutter); }
  .visit > img { border-radius: var(--r-hero) var(--r-hero) 0 0; }
  .read { border-radius: var(--r-hero) var(--r-hero) 0 0; }
}
@media (max-width: 560px) {
  :root { --r-hero: 32px; --r-card: 22px; }
}

@media (max-width: 900px) { .stage-bar { display: none; } }

/* ---------- home: the header sits above <main>, so it is the page banner ---------- */
.split--home .read { display: flex; flex-direction: column; }
.split--home .hero-nav { padding: 22px var(--pad) 0; }
.split--home .read > main { flex: 1; display: flex; flex-direction: column; }
.split--home .hero { flex: 1; min-height: 0; grid-template-rows: 1fr; padding-top: 0; }

/* ---------- home: a restrained closing card, no photograph ---------- */
.visit--plain { min-height: 0; margin-top: clamp(64px, 8vw, 120px); display: grid; justify-items: center; }
.visit--plain .card { position: static; width: min(520px, 100%); max-width: none; }
.visit--plain .visit-inner { margin: 0; width: 100%; display: grid; justify-items: center; }
.card .dl-head { margin-top: 10px; color: var(--ink); }

/* ---------- 404 ---------- */
.page-head--lost p.lost-home { grid-column: 1 / 13; margin-top: 32px; }
.page-head figcaption { margin-top: 10px; color: var(--muted); }

/* ---------- the Ku mark: a pale, fixed lockup behind every page ---------- */
/* Desktop: the symbol fills the left half of the screen, the name "Ku" the right half.
   The filter turns the paper of the scan white, and multiply then drops the white,
   so only the drawn lines remain. Both stay still while the page scrolls. */
body::before {
  content: ""; position: fixed; inset: 0 50% 0 0; z-index: -1; pointer-events: none;
  background: url(/img/ku-symbol.jpg) no-repeat center 55% / auto min(62svh, 36vw);
  filter: grayscale(1) contrast(1.8) brightness(1.16);
  mix-blend-mode: multiply; opacity: 0.08;
}
body::after {
  content: "Ku"; position: fixed; z-index: -1; pointer-events: none;
  top: 55%; left: 75%; transform: translate(-50%, -50%);
  font-family: var(--font); font-weight: 400; font-size: min(30svh, 15vw);
  line-height: 1; letter-spacing: -0.02em; color: var(--ink);
  mix-blend-mode: multiply; opacity: 0.08;
}
/* Phones: the symbol centred, with "Ku" underneath. The pair sits around the middle of the screen. */
@media (max-width: 900px) {
  :root {
    --sym-w: min(76vw, 460px);
    --sym-h: calc(var(--sym-w) * 1.256); /* the scan is 796 × 1000 */
    --sym-top: calc(52svh - var(--sym-h) * 0.64);
  }
  body::before { inset: 0; background-size: var(--sym-w) auto; background-position: center var(--sym-top); }
  body::after {
    top: calc(var(--sym-top) + var(--sym-h) * 1.04); left: 50%; transform: translateX(-50%);
    font-size: calc(var(--sym-w) * 0.3);
  }
}
/* Large panels let the mark show through, a little softer */
.read { background: color-mix(in srgb, var(--paper) 45%, transparent); }
.ku { background: color-mix(in srgb, var(--ku-soft) 72%, transparent); }
/* The home panel never overlaps a picture, so it needs no layer of its own.
   Without one, the logos blend straight through to the page and keep no paper box. */
.split--home .read { z-index: auto; }

/* ---------- home: 54/46 split, a calmer first screen ---------- */
/* The photo no longer takes half the screen, so the words and the two cards lead */
@media (min-width: 901px) { .split--home { grid-template-columns: 54fr 46fr; } }
.split--home .hero-body { align-self: start; padding: clamp(32px, 7vh, 88px) 0 clamp(24px, 4vh, 48px); }
.split--home .hero-lede { margin-top: 18px; }
.split--home .doors--routes { margin-top: 40px; gap: 22px; }
.split--home .doors--routes .door { padding: 14px 14px 26px; }
.split--home .doors--routes .door b, .split--home .doors--routes .door span { padding: 0 12px; }
.split--home .doors--routes .door .door-cta { margin-top: 22px; }
.split--home .intro { padding-top: clamp(72px, 9vw, 128px); }

/* a quiet caption on the photo, bottom left; the address lives in the contact card */
.stage-cap {
  position: absolute; left: 18px; bottom: 18px; z-index: 2; margin: 0;
  padding: 6px 12px; border-radius: var(--r-small);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  font-family: var(--ui); font-weight: 400; font-size: 0.9375rem; color: var(--ink);
}
.hero-photo { display: none; }
@media (max-width: 900px) {
  .stage-cap { display: none; }
  .hero-photo { display: block; margin: 40px 0 0; position: relative; }
  .hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); }
  .hero-photo figcaption { margin-top: 10px; text-align: left; font-family: var(--ui); font-size: 0.9375rem; color: var(--muted); }
}


/* ---------- home: meet Olga, a portrait beside a few lines ---------- */
.meet { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: end; }
.meet-photo { margin: 0; }
.meet-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 58%; border-radius: var(--r-card); }
.meet-text { display: grid; gap: 14px; justify-items: start; padding-bottom: 8px; }
.meet-text h2 { font-size: var(--step-head); }
.meet-role { font-family: var(--ui); font-size: 1rem; color: var(--muted); }
.meet-text p:not(.meet-role) { max-width: 34ch; }
@media (max-width: 560px) {
  .meet { grid-template-columns: 1fr; }
  .meet-photo img { aspect-ratio: 1; }
}

/* ---------- home: closing section, Olga beside the contact card ---------- */
.visit--meet {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); justify-items: stretch; align-items: center;
  gap: clamp(32px, 5vw, 72px); max-width: 1280px; margin-left: auto; margin-right: auto; padding: 0 var(--pad);
}
.visit--meet .visit-inner { justify-items: end; }
.nowrap { white-space: nowrap; }
@media (max-width: 900px) {
  .visit--meet { grid-template-columns: 1fr; padding: 0 var(--gutter); }
  .visit--meet .meet { padding: 0 16px; } /* lines up with the card below */
  .visit--meet .visit-inner { justify-items: center; }
}
/* Wide screens: Olga and the contact card stand as an even pair, the same height */
@media (min-width: 901px) {
  .visit--meet { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; max-width: 1240px; }
  .visit--meet .meet { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); align-items: stretch; margin: 0; }
  .visit--meet .meet-photo, .visit--meet .meet-photo img { height: 100%; }
  .visit--meet .meet-photo img { aspect-ratio: auto; min-height: 400px; }
  .visit--meet .meet-text { align-content: center; padding: 0; }
  .visit--meet .meet-text h2 { font-size: clamp(1.75rem, 1.1rem + 1vw, 2.25rem); }
  .visit--meet .visit-inner { justify-items: stretch; }
  .visit--meet .card { width: 100%; height: 100%; }
}
.head-fig--olga img { object-position: 50% 22%; }

/* ---------- bio: about Olga ---------- */
.sec .topics { margin-top: 0; }
.page-head--olga > p { font-family: var(--ui); font-size: 1.125rem; color: var(--muted); }
.bio-lead { font-size: var(--step-lead); line-height: 1.35; }
.letter .creds { margin: 8px 0; }
.bio-close { margin-top: 8px; }
.letter .end-cta { margin-top: 4px; }
/* Phones: on service pages the text panel slides over the sticky photo, so it must stay solid */
@media (max-width: 900px) { .split--page .read { background: var(--paper); } }

/* ---------- header logo: the symbol with "Ku" and "the healing space" on every page ---------- */
.wordmark { gap: 12px; align-items: center; }
.wordmark { gap: 14px; }
.wordmark img { width: 60px; }
.wm-text { display: grid; font-size: 2.5rem; line-height: 0.95; }
.wordmark small, .hero-nav .wordmark small {
  display: block; margin: 5px 0 0; padding: 0; align-self: auto;
  font-size: 0.9375rem; letter-spacing: 0.02em; line-height: 1; color: var(--muted);
}
@media (max-width: 900px) {
  .wordmark img { width: 44px; }
  .wm-text { font-size: 1.875rem; }
  .wordmark small, .hero-nav .wordmark small { display: block; font-size: 0.8125rem; }
}

/* ---------- bio: the opening words sit beside the portrait ---------- */
.page-head--olga { grid-template-rows: auto auto 1fr; }
.page-head--olga .head-fig { grid-row: 1 / 4; align-self: start; }
.bio-intro { grid-column: 1 / 8; grid-row: 3; align-self: start; margin-top: 40px; display: flex; flex-direction: column; gap: 1em; max-width: 46ch; }
.bio-intro p { margin: 0; font-size: var(--step-body); line-height: 1.5; }
.bio-intro .bio-lead { font-size: var(--step-lead); line-height: 1.35; }
@media (max-width: 900px) {
  .page-head--olga .head-fig { grid-row: auto; }
  .bio-intro { grid-column: 1 / 13; grid-row: auto; }
}

/* ---------- service pages: the side photo fits the screen under the header ---------- */
/* The header (about 106px) sits above the split, so the photo is shorter by that much */
@media (min-width: 901px) {
  .split--page .stage { height: calc(100svh - 106px - var(--gutter)); }
  /* site.js grows the frame upwards as the header leaves, so its bottom edge never moves.
     The photo is full-screen height plus some room, pinned to the bottom, and slides up
     through that room as the page scrolls (--p runs 0 to 1), so it never sits frozen. */
  .split--page .stage { --room: 120px; }
  .split--page .stage figure {
    inset: auto 0 calc(-1 * var(--room)) 0;
    height: calc(100svh - 2 * var(--gutter) + var(--room));
    translate: 0 calc(-1 * var(--room) * var(--p, 0));
  }
}

/* ---------- desktop header: a larger logo with room to breathe ---------- */
@media (min-width: 901px) {
  .wordmark { gap: 16px; }
  .wordmark img { width: 76px; }
  .wm-text { font-size: 3rem; }
  .wordmark small, .hero-nav .wordmark small { font-size: 1.0625rem; margin-top: 6px; }
  .bar { padding-top: 30px; padding-bottom: 30px; column-gap: 56px; }
  .split--home .hero-nav { padding-top: 30px; column-gap: 40px; }
}

/* ---------- logo lockup: "Ku" and "the healing space" span the full height of the symbol ---------- */
.wordmark { align-items: stretch; }
.wordmark img { width: auto; height: 56px; }
.wm-text { display: flex; flex-direction: column; justify-content: space-between; font-size: 2.6rem; line-height: 0.78; padding: 2px 0 1px; }
.wordmark small, .hero-nav .wordmark small { margin: 0; line-height: 1; font-size: 0.9375rem; }
@media (min-width: 901px) {
  .wordmark img { height: 72px; }
  .wm-text { font-size: 2.8rem; padding: 4px 0 2px; }
  .wordmark small, .hero-nav .wordmark small { font-size: 0.95rem; margin: 0; }
}

/* ---------- contact on phones: the photo spans the full width, like the two cards below ---------- */
@media (max-width: 900px) {
  .page-head--contact .head-fig { grid-column: 1 / 13; }
}

/* ---------- contact: the singing bowl in place of the seafront photo ---------- */
.visit > img.visit-bowl { object-position: 35% 72%; }

/* Desktop: the bowl photo sits beside the card at a size it holds sharply (it is 961px wide) */
@media (min-width: 901px) {
  .visit--photo {
    min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
    gap: clamp(32px, 5vw, 72px); max-width: 1180px; margin: 0 auto; padding: 0 var(--pad);
    border-radius: 0; overflow: visible;
  }
  .visit--photo > img.visit-bowl {
    position: static; width: 100%; max-width: 520px; height: auto; aspect-ratio: 4 / 5;
    justify-self: end; border-radius: var(--r-hero); object-position: 40% 70%;
  }
  .visit--photo .visit-inner { justify-self: start; width: 100%; }
  .visit--photo .card { position: static; margin: 0; }
}

/* ---------- phones: one header on every page ---------- */
/* Logo 24px from the left, menu 24px from the right, 16px above and below, on the page ground */
@media (max-width: 900px) {
  .bar { grid-template-columns: 1fr auto; padding: 16px 24px; }
  .split--home { padding: 0; }
  .split--home .read { background: transparent; border-radius: 0; }
  .split--home .hero-nav { padding: 16px 24px; }
  .split--home .hero { padding-left: var(--pad); padding-right: var(--pad); }
}

/* ---------- a quieter header ---------- */
/* Navigation one weight step firmer, so it reads against the open header */
.bar .links, .hero-nav .side { font-weight: 400; }
/* Desktop logo about a quarter smaller, the tagline tucked under "Ku" */
@media (min-width: 901px) {
  .wordmark { align-items: center; gap: 12px; }
  .wordmark img { height: 58px; }
  .wm-text { display: grid; justify-content: start; font-size: 2.875rem; line-height: 0.82; padding: 0; }
  .wordmark small, .hero-nav .wordmark small { font-size: 0.9375rem; margin-top: 4px; }
  .bar { padding-top: 24px; padding-bottom: 24px; }
  .split--home .hero-nav { padding-top: 24px; }
}

/* ---------- footer: a steady gap above it, not a third of the screen ---------- */
.foot-contact, .foot-contact:first-child { margin-top: clamp(72px, 8vw, 112px); }
@media (max-width: 900px) { .foot-contact { margin-top: 72px; } }
/* the yoga page ends on its photos, so its last section needs little padding below */
.faq--short { padding-bottom: clamp(32px, 4vw, 56px); }

/* ---------- bio on wide screens: text and portrait side by side, no empty middle ---------- */
@media (min-width: 901px) {
  .page-head--olga { max-width: calc(1180px + 2 * var(--pad)); margin-left: auto; margin-right: auto; }
  .page-head--olga h1, .page-head--olga > p, .page-head--olga .bio-intro { grid-column: 1 / 8; }
  .page-head--olga .bio-intro { max-width: 54ch; }
  .page-head--olga .head-fig { grid-column: 8 / 13; }
}
/* the quote and booking button start on the same left edge as the text above */
@media (min-width: 901px) {
  .bio-more + .letter { max-width: calc(1180px + 2 * var(--pad)); }
}

/* =====================================================================
   One set of layout rules for every page
   - Text starts at the same left edge: gutter + page padding (75px at 1440, 24px on phones).
   - Panels, photos and cards on phones line up with that text edge.
   - The page title (h1) sits the same distance under the header on every inner page.
   - Phones: words first, then the photo (home and therapy alike).
   ===================================================================== */
:root { --edge: calc(var(--pad) + var(--gutter)); --top: clamp(56px, 7vw, 100px); }

/* Desktop and tablet: one left edge and one title gap */
@media (min-width: 901px) {
  .page-head, .post-list { padding-left: var(--edge); padding-right: var(--edge); padding-top: var(--top); }
  .sec.page-top { padding-top: var(--top); }
  .ku--page { padding-top: var(--top); }
  /* bio: same left edge as every page, text and portrait side by side */
  .page-head--olga { max-width: none; margin-left: 0; margin-right: 0; }
  .bio-more + .letter { max-width: none; margin-left: 0; padding-left: var(--edge); padding-right: var(--edge); }
  .bio-more + .letter .measure { max-width: 54ch; }
}

/* Phones: everything on the 24px edge, nothing inset further */
@media (max-width: 900px) {
  :root { --edge: var(--pad); }
  .split--page { padding: 0; }
  .split--page .stage { display: none; }
  .split--page .read { background: transparent; border-radius: 0; margin-top: 0; }
  .ku { margin-left: 0; margin-right: 0; border-radius: 0; padding-left: var(--pad); padding-right: var(--pad); }
  .crossroads { margin-left: var(--pad); margin-right: var(--pad); }
  .visit:not(.visit--meet) { margin-left: var(--pad); margin-right: var(--pad); }
  .page-head .head-fig, .post figure { grid-column: 1 / 13; }
  .article > figure { margin-left: 0; margin-right: 0; }
}
@media (max-width: 900px) {
  .ku--page { padding-top: 64px; }   /* same title gap as the other pages */
  .steps, .sheet { margin-left: 0; margin-right: 0; } /* boxes on the 24px edge, not pushed past it */
}
/* the photo beside a page title takes the same columns on every page */
@media (min-width: 901px) {
  .page-head .head-fig, .page-head--olga .head-fig { grid-column: 8 / 13; }
}

/* ---------- home: «Ας μιλήσουμε» and Olga's square photo, side by side at the same height ---------- */
/* The card's content is about 494px tall at most, so a 500px square and a 500px card always match */
@media (min-width: 1200px) {
  .visit--meet { grid-template-columns: 400px minmax(0, 1fr); align-items: stretch; gap: 40px; max-width: 1340px; }
  .visit--meet .visit-inner { order: -1; justify-items: stretch; }
  .visit--meet .card { width: 100%; height: 500px; display: flex; flex-direction: column; justify-content: center; }
  .visit--meet .meet { grid-template-columns: 500px minmax(0, 1fr); align-items: center; gap: 28px; margin: 0; }
  .visit--meet .meet-photo, .visit--meet .meet-photo img { width: 500px; height: 500px; }
  .visit--meet .meet-photo img { aspect-ratio: auto; min-height: 0; object-position: 50% 50%; }
}
/* Between tablet and wide desktop there is no room for both: card above, Olga below */
@media (min-width: 901px) and (max-width: 1199px) {
  .visit--meet { grid-template-columns: 1fr; max-width: 760px; }
  .visit--meet .visit-inner { justify-items: stretch; }
  .visit--meet .card { width: 100%; height: auto; }
  .visit--meet .meet { grid-template-columns: 300px minmax(0, 1fr); align-items: center; }
  .visit--meet .meet-photo, .visit--meet .meet-photo img { width: 300px; height: 300px; }
  .visit--meet .meet-photo img { aspect-ratio: auto; min-height: 0; }
}
/* phones: the card and Olga's block both sit on the 24px edge */
@media (max-width: 900px) {
  .visit--meet { padding: 0 var(--pad); }
  .visit--meet .meet { padding: 0; }
  .visit--meet .visit-inner { justify-items: stretch; }
  .visit--meet .card { width: 100%; margin: 0; }
}

/* ---------- yoga timetable: a week grid, like Ku's printed programme ----------
   One column per day under a sage header, one row per start time, so classes at the same hour line up.
   Empty cells stay empty. Only the next class is marked. */
.sheet > .sheet-hint { margin: 18px auto 0; max-width: 32ch; font-family: var(--font); font-size: 1.125rem; line-height: 1.4; color: var(--ink); }
/* Level 2 is for people with experience, so its classes are outlined, not filled:
   a newcomer sees at a glance which classes are theirs. */
.week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 28px; }
.week .day, .week ul { display: contents; }
.week ul { list-style: none; margin: 0; padding: 0; }
.week .day-name {
  grid-row: 1; grid-column: var(--col); margin: 0; padding: 12px 4px; background: var(--ku-field); color: var(--ink); border-radius: 6px;
  font-family: var(--ui); font-weight: 500; font-size: 0.9375rem; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; text-align: center;
}
.week li {
  grid-row: var(--row); grid-column: var(--col);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  padding: 12px 6px 14px; text-align: center; border-radius: 6px;
  background: color-mix(in srgb, var(--ku-field) 45%, var(--paper)); transition: background-color 0.4s;
}
.week li[data-level="Επίπεδο 2"] { background: none; box-shadow: inset 0 0 0 1px var(--ku-field); }
.week .time { font-family: var(--ui); font-size: 1rem; line-height: 1.3; color: var(--ink); }
.week .lvl { font-family: var(--font); font-size: 1.0625rem; line-height: 1.2; color: var(--muted); }
.week li.is-next { background: var(--ku-field); box-shadow: inset 0 0 0 1.5px var(--ku); }
.week li.is-next .lvl { color: var(--ink); }

/* Phones: the same week grid, made to fit. The card loses some side padding so the columns
   gain width. Each cell reads start time, end time (smaller), then level, and every cell
   in a row has the same height, so the rows stay straight. */
@media (max-width: 600px) {
  .ku .sheet { padding-left: 8px; padding-right: 8px; }
  .week { gap: 4px; margin-top: 24px; }
  .week .day-name { padding: 9px 0; font-size: 0.6875rem; letter-spacing: 0.04em; border-radius: 6px; }
  .week li { gap: 0; padding: 10px 2px 11px; }
  .week .time { font-size: 1rem; line-height: 1.2; }
  .week .end { display: block; font-size: 0.8125rem; color: var(--muted); }
  .week .dash { display: none; }
  .week .lvl { margin-top: 6px; font-size: 0.875rem; line-height: 1.15; }
}
/* the smallest phones: "Επίπεδο 1" must still fit inside its cell */
@media (max-width: 360px) {
  .week .lvl { font-size: 0.8125rem; }
  .week .day-name { font-size: 0.625rem; letter-spacing: 0.02em; }
}

/* The yoga band in two rows of two columns.
   Row 1: what and when (title, intro, next class) beside the timetable.
   Row 2: events beside the levels, which sit under the timetable because its rows name them.
   Both row-2 blocks start on the same line. On one column the source order is the reading order. */
.ku-head { grid-row: 1; align-self: start; }
.ku .sheet { grid-row: 1; }
.ku > .levels { grid-column: 8 / 13; grid-row: 2; margin-top: 64px; padding: 0 8px; }
.ku > .events { grid-column: 1 / 7; grid-row: 2; margin-top: 64px; }
/* desktop: a wider card for the week grid */
@media (min-width: 1101px) {
  .ku .sheet, .ku > .levels { grid-column: 7 / 13; }
}

/* ---------- yoga in one column (tablets and phones): title, next class, timetable, levels, events, photos ---------- */
@media (max-width: 1100px) {
  .ku-head, .ku .sheet, .ku > .levels, .ku > .events, .ku-photos { grid-column: 1 / 13; grid-row: auto; }
  .ku .sheet { margin-top: 56px; }
  .ku > .levels { padding: 0; }
}
@media (max-width: 900px) {
  .ku .sheet { margin-top: 40px; width: auto; justify-self: stretch; }
}

/* ---------- CF Angeliki and CF Ifigeneia (fonts.gr trial files) ----------
   The edited demo files add ά έ ή ί ό ύ ώ, « » and €. They still lack accented
   capitals (Ό), ϊ ϋ, ·, – and the hyphen. Their ί accent is too small to read,
   so unicode-range skips U+03AF. Those letters come from "Ku Fill" (Manrope at 92%). The bought files fix this:
   swap the src lines for the .woff2 files and delete trial-fonts/. */
@font-face { font-family: "CF Angeliki"; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/AngelikiTest-Light-DemoExtended.otf) format("opentype"); unicode-range: U+0000-03AE, U+03B0-FFFF; }
@font-face { font-family: "CF Angeliki"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/AngelikiTest-Regular-DemoExtended.otf) format("opentype"); unicode-range: U+0000-03AE, U+03B0-FFFF; }
@font-face { font-family: "CF Angeliki"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/AngelikiTest-RegularItalic-DemoExtended.otf) format("opentype"); unicode-range: U+0000-03AE, U+03B0-FFFF; }
@font-face { font-family: "CF Angeliki"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/AngelikiTest-Medium-DemoExtended.otf) format("opentype"); unicode-range: U+0000-03AE, U+03B0-FFFF; }
@font-face { font-family: "CF Ifigeneia"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/IfigeneiaAltTest-Regular-DemoExtended.otf) format("opentype"); unicode-range: U+0000-03AE, U+03B0-FFFF; }

/* Ku Fill: Manrope scaled to the trial font's letter size. It draws only the letters the trial lacks. */
@font-face { font-family: "Ku Fill"; font-style: normal; font-weight: 300; font-display: swap; size-adjust: 92%; src: url(/fonts/manrope-greek-300-normal.woff2) format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Ku Fill"; font-style: normal; font-weight: 300; font-display: swap; size-adjust: 92%; src: url(/fonts/manrope-latin-300-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; }
@font-face { font-family: "Ku Fill"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 92%; src: url(/fonts/manrope-greek-400-normal.woff2) format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Ku Fill"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 92%; src: url(/fonts/manrope-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; }
@font-face { font-family: "Ku Fill"; font-style: normal; font-weight: 500; font-display: swap; size-adjust: 92%; src: url(/fonts/manrope-greek-500-normal.woff2) format("woff2"); unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Ku Fill"; font-style: normal; font-weight: 500; font-display: swap; size-adjust: 92%; src: url(/fonts/manrope-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; }

:root {
  --font: "CF Angeliki", "Ku Fill", "EB Garamond", Georgia, serif;
  --ui: "CF Angeliki", "Ku Fill", "EB Garamond", Georgia, serif;
  --display: "CF Ifigeneia", "Ku Fill", "EB Garamond", Georgia, serif;
}
/* Main text, navigation, buttons and schedules: Regular and Medium. */
.bar .links, .hero-nav .side, .stage-bar, .tabs button, .menu nav small, .menu-close,
.foot, .foot-contact, figcaption, .cap, .facts, .card dl, .card .reach, .card .map, .sheet > p, .sheet .where,
.article .meta, .post time, .post .post-more, .pair a, .share, .more-posts time, .events .date, .letter blockquote footer, .sign span,
.wordmark small, .emblem a { font-weight: 400; }
.door span { font-weight: 400; }
.btn, .door .door-cta { font-weight: 500; }
/* Headings: Light. */
h1, h2, h3 { font-weight: 300; }
/* The Ku wordmark and the background "Ku": Ifigeneia. */
.wm-text, body::after { font-family: var(--display); }
.wm-text small { font-family: var(--font); }

/* ---------- yoga page rhythm: the band closes with the same space it opens with ---------- */
@media (min-width: 901px) {
  .ku--page { padding-bottom: var(--top); }
  .ku--page + .faq--short { padding-top: var(--top); }
  /* the FAQ photo pair ends near the end of the FAQ text, not 300px below it */
  .faq--short .faq-pics .tall { aspect-ratio: 1; }
}

/* ---------- psychotherapy services: the old site's text, with its "who it is for" list ---------- */
.panel .fit-h { margin-top: 24px; font-style: italic; color: var(--therapy); }
.panel .fit { margin: 10px 0 0; padding-left: 1.1em; max-width: 42ch; display: grid; gap: 6px; }
.panel .fit li { padding-left: 4px; }
.panel .fit li::marker { color: var(--therapy); }
.qa details p + p { margin-top: 0.8em; }

/* ---------- bio: the formal paragraph leads, the rest sits quieter in three columns ---------- */
.bio-intro .bio-lead { font-size: clamp(1.1875rem, 1.45vw, 1.375rem); line-height: 1.5; }
.bio-more { margin-top: clamp(56px, 7vw, 96px); padding: 0 var(--pad); }
@media (min-width: 901px) { .bio-more { padding: 0 var(--edge); } } /* the shared page edge */
.bio-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.bio-cols h2 { font-size: 1.25rem; font-style: italic; font-weight: 400; color: var(--therapy); }
.bio-cols p { margin-top: 10px; font-size: 1.0625rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 900px) { .bio-cols { grid-template-columns: 1fr; gap: 28px; } }
.bio-more + .letter { margin-top: clamp(56px, 7vw, 96px); }

/* ---------- events: the yoga band's short list, and the page of its own ---------- */
.next-how { margin-top: 10px; font-size: 1rem; color: var(--muted); }
.events-all { margin-top: 24px; }
.events li .go { margin-top: 8px; }
.events li .go span { display: inline; font-size: inherit; color: inherit; }
.events--page { margin-top: clamp(64px, 8vw, 120px); padding: 0 var(--pad); max-width: none; }
@media (min-width: 901px) { .events--page { padding: 0 var(--edge); } } /* the shared page edge */
.events--page h2 { font-size: var(--step-head); }
.events--past { margin-top: clamp(72px, 9vw, 128px); }
/* The events page: the title and the events in one column on the left, one card per row,
   and the sitar photo on the right, pinned while the list scrolls past.
   The coming events follow the title directly (their heading is for screen readers only). */
.ev-page {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: 0 clamp(32px, 4vw, 64px); align-items: start;
  padding: var(--top) var(--edge) 0;
}
.ev-page h1 { font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.03em; }
.ev-page .events--page { padding: 0; margin-top: 48px; }
.ev-page .events--past { margin-top: clamp(64px, 7vw, 104px); }
.ev-page .events--page .ev-list { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.ev-page .events--past .ev-list { margin-top: 28px; }
/* In one column, past cards keep the badge on the left like the coming ones, a little smaller */
@media (min-width: 601px) {
  .ev-page .events--past .ev { grid-template-columns: 80px minmax(0, 1fr); gap: 24px; }
  .ev-page .events--past .ev-when { aspect-ratio: 1; display: grid; padding: 0; }
  .ev-page .events--past .ev-day { font-size: 2.25rem; line-height: 0.95; }
}
.ev-photo { position: sticky; top: 24px; margin: 0; }
.ev-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-hero); }
/* Phones: one column, the photo after the title as a short strip */
@media (max-width: 900px) {
  .ev-page { grid-template-columns: minmax(0, 1fr); }
  .ev-photo { position: static; order: -1; grid-row: 2; margin-top: 32px; }
  .ev-col { display: contents; }
  .ev-page h1 { grid-row: 1; }
  .ev-page .events--page { grid-row: 3; }
  .ev-page .events--past { grid-row: 4; }
  .ev-photo img { aspect-ratio: 3 / 2; object-position: 50% 15%; border-radius: var(--r-card); }
}
/* Events as solid cards across the full width: two per row on a wide screen, one on a phone.
   Solid paper keeps the Ku mark behind the page out of the words.
   Each card has a sage date badge and a tag: Έρχεται, Σε εξέλιξη or Έγινε. */
.ev-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.events--page .ev {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 28px; align-items: start;
  padding: 28px; background: var(--paper); border-radius: var(--r-card);
}
.ev-when {
  display: grid; place-content: center; justify-items: center; aspect-ratio: 1;
  background: var(--ku-field); color: var(--ink); border-radius: var(--r-small); text-align: center;
}
.ev-when--open { background: var(--ku-soft); }
.events--page .ev-wd, .events--page .ev-month { font-family: var(--ui); font-weight: 500; font-size: 0.75rem; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.events--page .ev-day { font-family: var(--font); font-size: 3rem; line-height: 0.95; color: var(--ink); }
.events--page .ev-when--open .ev-month { color: var(--ku); }
.ev-body { display: grid; gap: 6px; justify-items: start; }
.events--page .ev-status {
  margin-bottom: 4px; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--ku-field); color: var(--ink);
  font-family: var(--ui); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.events--page .ev b { font-size: 1.75rem; line-height: 1.1; }
.events--page .ev-host { font-style: italic; color: var(--ku); }
.events--page .ev-text { color: var(--ink); }
.events--page .ev .date { margin-top: 6px; font-style: normal; font-family: var(--ui); font-size: 1rem; color: var(--ink); }
.events--page .ev-time:not(.ev-time--long) { white-space: nowrap; }
.events--page .ev-price { font-family: var(--ui); font-size: 1rem; color: var(--muted); }
.events--page .ev .go { margin-top: 8px; white-space: nowrap; }
/* Past events: the same card, quieter and smaller, three to a row on a wide screen */
.events--past .ev-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
/* The date sits on one line above the title, so the words get the card's full width */
.events--past .ev { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px; }
.events--past .ev-when { aspect-ratio: auto; display: flex; align-items: baseline; gap: 8px; justify-self: start; padding: 6px 14px; }
.events--past .ev-day { font-size: 1.5rem; line-height: 1; }
.events--past .ev b { font-size: 1.5rem; }
.events--page .ev.is-past { background: var(--paper); }
.events--page .is-past .ev-text, .events--page .is-past .date { color: var(--muted); }
.events--page .is-past .ev-when { background: var(--surface); }
.events--page .is-past .ev-status { background: var(--surface); color: var(--muted); }
.events--page .is-past .ev-host { color: var(--muted); }
.ev-empty { margin-top: 24px; max-width: 46ch; }
/* Phones: every card puts its date on one line above the title, like the past cards */
@media (max-width: 600px) {
  .events--page .ev { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px; }
  .events--page .ev-when { aspect-ratio: auto; display: flex; align-items: baseline; gap: 8px; justify-self: start; padding: 6px 14px; }
  .events--page .ev-when--open .ev-month br { display: none; }
  .events--page .ev-day { font-size: 1.5rem; line-height: 1; }
  .events--page .ev b { font-size: 1.5rem; }
  .events--page .ev .go { white-space: normal; }
  /* the date pill and the status pill share the first row; the words run full width below */
  .events--page .ev { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-items: center; }
  .events--page .ev-body { display: contents; }
  .events--page .ev-body > * { grid-column: 1 / -1; justify-self: start; }
  .events--page .ev-body > .ev-status {
    grid-column: 2; grid-row: 1; margin: 0; justify-self: end; align-self: stretch;
    display: flex; align-items: center; padding: 0 14px;
  }
  .events--page .ev-body > b { margin-top: 8px; }
}
.events--page .end-cta { margin-top: 48px; }