/* MERA · voda uzima oblik. The page is a still pool: the cursor and a hurried scroll disturb it, stillness returns on its own.
   Headings carry their reflection, the cards float, the guide stirs the water by state and a breath calms it. */
:root{
  --paper:#F3EEE6; --paper-2:#EAE3D7; --ink:#1C1917; --ink-2:#3C3631; --muted:#6F6860; --line:rgba(28,25,23,.15);
  --clay:#C2634B; --clay-deep:#A8513C; --sage:#738671; --sage-deep:#4F5F4D; --water:#8FA69B;
  --display:'Outfit','Helvetica Neue',Arial,sans-serif; --mono:'Space Mono',ui-monospace,Menlo,monospace;
  --gut:clamp(20px,5vw,80px); --bar-h:64px; --measure:1240px;
  /* the breath: 5.5 s in, 5.5 s out (coherent breathing). Every animation and transition is a fraction or a multiple of it, with one sine ease */
  --breath:5.5s; --breath-2:calc(var(--breath)*2); --breath-half:calc(var(--breath)/2); --breath-q:calc(var(--breath)/4); --breath-8:calc(var(--breath)/8); --breath-16:calc(var(--breath)/16);
  --ease:cubic-bezier(.37,0,.63,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 10px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--ink);color:var(--paper)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:.96;text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
.lbl{display:block;font:600 .68rem/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.lbl.clay{color:var(--clay)}
.lbl.sage{color:var(--sage-deep)}
.wrap{max-width:var(--measure);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:fixed;left:12px;top:12px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;font:500 13px/1 var(--mono);transform:translateY(-200%);text-decoration:none}
.skip:focus{transform:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:.95rem 1.35rem;border:1px solid var(--clay);border-radius:0;background:var(--clay);color:#fff;font:650 .875rem/1.2 var(--display);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background var(--breath-16) var(--ease),border-color var(--breath-16) var(--ease),transform var(--breath-16) var(--ease),color var(--breath-16) var(--ease)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.sm{padding:.7rem 1rem;font-size:.8rem}
.btn[disabled]{opacity:.6;cursor:wait}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.btn:hover{transform:translateY(-2px)}}
.plink{font-size:.875rem;font-weight:500;text-decoration:underline}
.plink span{color:var(--clay)}

/* ---------- the bar: the rings, the stations, the level of the page you have read ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:20;height:var(--bar-h);display:flex;align-items:center;gap:clamp(12px,1.8vw,30px);padding:0 var(--gut);
  background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 97%,transparent) 0%,color-mix(in srgb,var(--paper) 94%,transparent) 76%,transparent 100%)}
.bar .level{position:absolute;left:0;bottom:0;height:1px;width:calc(var(--p,0) * 100%);background:var(--clay);transition:width var(--breath-16) var(--ease)}
.mark{display:inline-flex;align-items:center;gap:9px;font:700 18px/1 var(--display);letter-spacing:.18em;text-decoration:none}
.mark svg{width:22px;height:22px;color:var(--clay)}
.mark svg .r2,.mark svg .r3{transition:transform var(--breath-8) var(--ease);transform-origin:50% 50%}
.mark:hover svg .r2{transform:scale(1.25)}
.mark:hover svg .r3{transform:scale(1.45)}
.links{display:flex;align-items:center;gap:clamp(10px,1.6vw,24px);margin-left:auto;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.links a{text-decoration:none;padding:8px 0;opacity:.78;white-space:nowrap;position:relative}
.links a:hover,.links a.on{opacity:1}
.links a.on::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--clay)}
.links .write{padding:0 18px;height:36px;display:inline-flex;align-items:center;background:var(--clay);color:#fff;font-weight:700;opacity:1;border:1px solid var(--clay)}
.links .write:hover{background:var(--ink);border-color:var(--ink)}
.links .write.on::after{display:none}
.lang{display:inline-flex;gap:2px;font:700 10.5px/1 var(--mono);letter-spacing:.1em}
.lang button{border:0;background:transparent;color:inherit;padding:6px 7px;cursor:pointer;font:inherit;opacity:.45;border-bottom:1px solid transparent}
.lang button[aria-pressed="true"]{opacity:1;border-color:var(--clay)}
.burger{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;padding:0;place-items:center;margin-left:auto}
.burger span{display:block;width:15px;height:1.5px;background:var(--ink)}
.burger span+span{margin-top:5px}

/* ---------- water: a canvas that refracts the photograph through a live surface ---------- */
.water{position:relative;isolation:isolate;overflow:hidden;background:var(--paper-2)}
.water canvas,.water .fallback{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.water .fallback{object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transition:opacity var(--breath-8) var(--ease)}
.water canvas{opacity:0;transition:opacity var(--breath-8) var(--ease)}
.water.water-on canvas{opacity:1}
.water .touch{position:absolute;z-index:3;right:var(--gut);bottom:22px;margin:0;padding:8px 12px;border-radius:999px;background:color-mix(in srgb,var(--paper) 80%,transparent);font:400 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);pointer-events:none;opacity:0;transition:opacity var(--breath-8) var(--ease)}
.water .touch.on{opacity:1}
.water .touch i{display:inline-block;width:6px;height:6px;border:1px solid var(--clay);border-radius:50%;margin-right:8px;vertical-align:1px;animation:ring var(--breath-half) var(--ease) infinite}
@keyframes ring{from{transform:scale(.6);opacity:1}to{transform:scale(2);opacity:0}}

/* the entrance: the pavilion and its pool, under the bar; the words on a veil at the left, the cards afloat at the right */
/* the entrance: the whole photograph, uncut, in a frame under the bar; the veil and the cards float up over the pool at its lower edge */
.hero{display:block}
.hero .frame{position:relative;width:100%;aspect-ratio:3104/1312;margin-top:var(--bar-h);background:var(--paper-2)}
.hero .wrap{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:end;padding-top:0;margin-top:-14vw;padding-bottom:56px}
.veil{max-width:620px;padding:30px 32px 28px;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--paper) 60%,transparent);display:grid;gap:18px}
.veil .kicker{display:flex;flex-wrap:wrap;gap:.3rem 1rem}
/* the entrance, quiet: the photograph surfaces slowly and settles; the veil comes up a few pixels on a long fade, its lines after it one by one,
   the cards last. Then everything breathes in one slow rhythm: seven seconds in, seven out, a few pixels, nothing abrupt. */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes settle{from{transform:scale(1.015)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes breathe{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@keyframes breathe-deep{from{transform:scale(1)}to{transform:scale(1.02)}}
.hero .frame{overflow:hidden;animation:fade var(--breath-half) var(--ease) both}
.hero .frame::after{content:'';position:absolute;inset:-12% -8%;z-index:1;pointer-events:none;background:radial-gradient(50% 60% at 12% 42%,color-mix(in srgb,var(--paper) 70%,transparent),transparent 70%);animation:mist var(--breath-2) var(--ease) infinite alternate}
@keyframes mist{from{transform:translateX(-3%);opacity:.08}to{transform:translateX(3%);opacity:.55}}
.hero .frame>canvas,.hero .frame .fallback{animation:settle var(--breath) var(--ease) both,breathe-deep var(--breath) var(--ease) var(--breath) infinite alternate}
.veil{animation:rise var(--breath-half) var(--ease) var(--breath-8) both,breathe var(--breath) var(--ease) calc(var(--breath-half) + var(--breath-8)) infinite alternate}
.veil>*{animation:rise var(--breath-half) var(--ease) both}
.veil>:nth-child(1){animation-delay:calc(var(--breath-q) + var(--breath)*0)}.veil>:nth-child(2){animation-delay:calc(var(--breath-q) + var(--breath)*0.03125)}.veil>:nth-child(3){animation-delay:calc(var(--breath-q) + var(--breath)*0.0625)}.veil>:nth-child(4){animation-delay:calc(var(--breath-q) + var(--breath)*0.09375)}.veil>:nth-child(5){animation-delay:calc(var(--breath-q) + var(--breath)*0.125)}.veil>:nth-child(6){animation-delay:calc(var(--breath-q) + var(--breath)*0.15625)}
.cards{animation:rise var(--breath-half) var(--ease) calc(var(--breath-q) + var(--breath-8)) both}
@media (prefers-reduced-motion:reduce){.hero .frame,.hero .frame::after,.hero .frame>canvas,.hero .frame .fallback,.veil,.veil>*,.cards{animation:none}}
/* surfacing: every block below the hero comes up out of the page on half a breath as it scrolls into view */
.rv{opacity:0;transform:translateY(22px);transition:opacity var(--breath-half) var(--ease) var(--d,0s),transform var(--breath-half) var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
.hero-title{font-size:clamp(2.4rem,4.6vw,4.4rem);line-height:.94;letter-spacing:-.04em}
.hero-title em{font-style:normal;color:var(--clay)}
.hero-who{font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.35;font-weight:450;max-width:34ch;color:var(--ink)}
.hero-lede{font-size:.98rem;line-height:1.6;color:var(--ink-2);max-width:48ch}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:4px}
.hero-meta{font:400 .66rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cards{display:grid;gap:12px;justify-self:end;width:min(100%,330px)}
.fcard{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:16px 16px 14px;border:1px solid color-mix(in srgb,var(--paper) 55%,transparent);background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:left;text-decoration:none;color:inherit;font:inherit;cursor:pointer;transition:transform var(--breath-16) var(--ease),border-color var(--breath-16) var(--ease);animation:breathe var(--breath) var(--ease) infinite alternate}
.fcard:nth-child(2){animation-delay:calc(-1 * var(--breath))}
.fcard:hover{border-color:var(--ink);animation-play-state:paused}
.fcard b{font:700 1.05rem/1.15 var(--display);letter-spacing:-.02em}
.fcard span{grid-column:1;font-size:.8rem;line-height:1.4;color:var(--ink-2)}
.fcard i{grid-row:1/3;grid-column:2;align-self:start;width:32px;height:32px;border-radius:50%;background:var(--clay);color:#fff;display:grid;place-items:center;font-style:normal;font-size:.95rem;transition:transform var(--breath-16) var(--ease)}
.fcard:hover i{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){.fcard{animation:none}}

/* ---------- sections on paper ---------- */
.sec{padding-block:clamp(72px,10vw,136px)}
.sec.alt{background:var(--paper-2)}
.head{display:grid;gap:14px;max-width:760px}
.h2{font-size:clamp(2.2rem,4.6vw,4.2rem);letter-spacing:-.035em;line-height:.96}
/* a heading and its reflection in the water: the copy below it, flipped, fading, trembling a little */
.refl{position:relative;display:inline-block}
.refl .mirror{position:absolute;left:0;top:100%;margin-top:.06em;display:block;transform:scaleY(-1);transform-origin:50% 0;color:var(--ink);opacity:.16;filter:blur(.6px);pointer-events:none;user-select:none;white-space:nowrap;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 70%);mask-image:linear-gradient(180deg,transparent 0,#000 70%);animation:waver var(--breath-2) var(--ease) infinite}
.refl .mirror{-webkit-mask-image:linear-gradient(0deg,transparent 15%,#000 95%);mask-image:linear-gradient(0deg,transparent 15%,#000 95%)}
@keyframes waver{0%,100%{transform:scaleY(-1) skewX(0deg)}30%{transform:scaleY(-1) skewX(1.2deg)}65%{transform:scaleY(-1) skewX(-.9deg)}}
@media (prefers-reduced-motion:reduce){.refl .mirror{animation:none}}
.h2.refl{margin-bottom:.9em}
.plain{font-size:clamp(1.1rem,1.45vw,1.4rem);line-height:1.38;font-weight:450;letter-spacing:-.012em;max-width:40ch;text-wrap:pretty;color:var(--ink)}
.split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.split.rev{grid-template-columns:7fr 5fr}

/* 01 · the vessel: the manifesto line, three meanings, the names tried on */
.manifesto{font-size:clamp(1.9rem,4vw,3.6rem);line-height:1.04;letter-spacing:-.035em;font-weight:700;max-width:18ch}
.manifesto em{font-style:normal;color:var(--sage-deep)}
.meanings{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(40px,6vw,72px);border-top:1.5px solid var(--ink)}
.meaning{padding:22px 24px 26px 0;border-right:1px solid var(--line);display:grid;gap:10px;align-content:start}
.meaning:last-child{border-right:0}
.meaning:not(:first-child){padding-left:24px}
.meaning .n{font:700 .72rem/1 var(--mono);color:var(--clay)}
.meaning dt{font:700 1.35rem/1.15 var(--display);letter-spacing:-.025em}
.meaning dd{margin:0;font-size:.95rem;color:var(--ink-2)}
.entry-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-top:clamp(32px,4vw,48px)}
.entry-head .word{font:700 2.2rem/1 var(--display);letter-spacing:-.03em}
.entry-head .pos{font-style:italic;color:var(--muted);font-size:.95rem}
.entry-head .ety{font:400 .7rem/1 var(--mono);color:var(--muted);letter-spacing:.04em}
.explorer{margin-top:clamp(48px,7vw,88px);padding-top:28px;border-top:1px solid var(--line);display:grid;grid-template-columns:5fr 7fr;gap:32px;align-items:start}
.names{display:flex;flex-wrap:wrap;gap:6px 26px}
.names label{position:relative;cursor:pointer}
.names input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.names .pill{display:inline-block;font:700 clamp(1.5rem,2.6vw,2.2rem)/1.2 var(--display);letter-spacing:.06em;color:var(--muted);border-bottom:2px solid transparent;transition:color var(--breath-16) var(--ease),border-color var(--breath-16) var(--ease)}
.names label:hover .pill{color:var(--ink)}
.names input:checked+.pill{color:var(--ink);border-color:var(--clay)}
.names input:focus-visible+.pill{outline:2px solid var(--ink);outline-offset:4px}
.name-note{margin-top:.8rem;font-size:.9rem;color:var(--ink-2)}

/* 02 · the mould and the water: two film frames, one under the other, then the pairs */
.kalup{display:grid;gap:20px;margin-top:clamp(32px,5vw,56px)}
.kalup figure{margin:0;padding:14px 14px 12px;border:1px solid var(--line);background:var(--paper);display:grid;gap:12px}
.kalup img{width:100%;height:auto;display:block;aspect-ratio:3104/1312}
.kalup figcaption{font:400 .66rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pairs{margin-top:clamp(36px,5vw,56px);border-top:1.5px solid var(--ink);max-width:900px}
.pair{display:grid;grid-template-columns:1fr 1.25fr;gap:28px;padding:20px 0;border-bottom:1px solid var(--line)}
.pair>div{display:grid;gap:6px;align-content:start;min-width:0}
.pair .lbl{font-size:.6rem}
.pair .m .lbl{color:var(--sage-deep)}
.pair .k p{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--clay) 65%,transparent)}
.pair .m p{font:600 clamp(1.05rem,1.5vw,1.3rem)/1.3 var(--display);letter-spacing:-.015em}

/* 03 · the therapist */
.portrait{position:relative;max-width:520px}
.portrait img{aspect-ratio:4/5;object-fit:cover;width:100%}
.role{margin-top:.6rem;font:400 .7rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.about-copy{display:grid;gap:1rem;margin-top:1.4rem}
.about-copy p{font-size:1rem;color:var(--ink-2);max-width:52ch}
.ethics{margin-top:1.8rem;border-top:1.5px solid var(--ink)}
.ethics .lbl{padding:14px 0 4px}
.ethics dl{margin:0}
.sense{display:grid;grid-template-columns:8.5rem 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.sense dt{font:650 .66rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0;padding-top:2px}
.sense dd{margin:0;font-size:.92rem;color:var(--ink-2)}

/* 04 · services: the index, the measures */
.index{border-top:1.5px solid var(--ink);margin-top:clamp(32px,5vw,56px)}
.row{display:grid;grid-template-columns:56px 1fr 1.3fr 170px;gap:24px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.row .num{font:700 .78rem/1 var(--mono);color:var(--clay);padding-top:7px}
.row h3{font-size:1.35rem;letter-spacing:-.025em;line-height:1.15}
.row p{font-size:.95rem;color:var(--ink-2)}
.row .tags{display:grid;gap:4px;font:400 .62rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:6px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--line)}
.fact{padding:20px 20px 20px 0;border-right:1px solid var(--line);min-width:0}
.fact:last-child{border-right:0}
.fact b{display:block;font:700 clamp(1.7rem,2.8vw,2.4rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:8px;font:400 .62rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* 05 · the practice: photographs standing at the water's edge, each with its reflection */
.pools{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(36px,5vw,56px)}
.pool{margin:0;min-width:0}
.pool.wide{grid-column:1/-1}
.pool .pic{position:relative}
.pool .pic img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pool.wide .pic img{aspect-ratio:16/8}
.pool .rf{position:absolute;left:0;right:0;top:100%;height:34%;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 100%);mask-image:linear-gradient(180deg,#000 0,transparent 100%)}
.pool .rf img{position:absolute;left:0;bottom:0;width:100%;height:auto;transform:scaleY(-1);transform-origin:50% 100%;opacity:.32;filter:blur(1.2px);animation:waver2 var(--breath-2) var(--ease) infinite}
@keyframes waver2{0%,100%{transform:scaleY(-1) skewX(0)}40%{transform:scaleY(-1) skewX(1deg)}70%{transform:scaleY(-1) skewX(-.8deg)}}
@media (prefers-reduced-motion:reduce){.pool .rf img{animation:none}}
.pool figcaption{position:relative;z-index:1;margin-top:calc(34% * .62);font:400 .66rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pool.wide figcaption{margin-top:calc(34% * .36)}

/* 06 · where you are: the dusk pool, the states that stir it, the breath that calms it */
.guide{min-height:92svh;display:grid;align-items:center;color:var(--paper)}
.guide::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,18,16,.78) 0,rgba(20,18,16,.55) 48%,rgba(20,18,16,.2) 100%);pointer-events:none}
.guide .wrap{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start;padding-block:clamp(72px,10vw,120px)}
.guide .lbl{color:var(--clay)}
.guide .h2{color:var(--paper)}
.guide .refl .mirror{color:var(--paper);opacity:.14}
.guide .plain{color:var(--paper);opacity:.85}
.states{display:grid;margin-top:1.6rem;border-top:1px solid rgba(243,238,230,.35)}
.state{display:grid;grid-template-columns:2.2rem 1fr auto;gap:10px;align-items:baseline;text-align:left;padding:13px 0;border:0;border-bottom:1px solid rgba(243,238,230,.16);background:transparent;color:inherit;font:600 1.08rem/1.25 var(--display);letter-spacing:-.015em;cursor:pointer;opacity:.78;transition:opacity var(--breath-16) var(--ease),padding-left var(--breath-16) var(--ease)}
.state .i{font:700 .66rem/1 var(--mono);letter-spacing:.08em;opacity:.7}
.state .arr{color:var(--clay);opacity:0;transition:opacity var(--breath-16) var(--ease)}
.state:hover{opacity:1}
.state[aria-pressed="true"]{opacity:1;padding-left:6px}
.state[aria-pressed="true"] .arr{opacity:1}
.insight{display:grid;gap:18px;align-content:start;min-height:220px}
.insight .empty{font:500 clamp(1.2rem,2vw,1.7rem)/1.35 var(--display);letter-spacing:-.015em;color:var(--paper);opacity:.62;max-width:26ch}
.insight .big{font:500 clamp(1.35rem,2.3vw,2rem)/1.35 var(--display);letter-spacing:-.015em;max-width:28ch}
.insight-actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.tlink{font:400 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;opacity:.85}
.breath{margin-top:22px;padding-top:18px;border-top:1px solid rgba(243,238,230,.2);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.breath .orb{width:64px;height:64px;border-radius:50%;border:1px solid var(--paper);display:grid;place-items:center;position:relative}
.breath .orb::before{content:'';position:absolute;inset:0;border-radius:50%;background:color-mix(in srgb,var(--paper) 18%,transparent);transform:scale(var(--b,.35));transition:transform var(--bt,var(--breath)) var(--ease)}
.breath .orb i{width:6px;height:6px;border-radius:50%;background:var(--clay)}
.breath p{font:400 .72rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.breath p b{display:block;font:600 1rem/1.3 var(--display);letter-spacing:-.01em;text-transform:none}
.crisis{position:relative;z-index:2;margin:0;padding:14px var(--gut) 18px;border-top:1px solid rgba(243,238,230,.2);font:400 .7rem/1.7 var(--mono);letter-spacing:.03em;color:var(--paper);opacity:.8;background:rgba(20,18,16,.5)}

/* 07 · questions */
.faqs{border-top:1.5px solid var(--ink);max-width:820px}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:18px 0;font:600 clamp(1.1rem,1.8vw,1.4rem)/1.25 var(--display);letter-spacing:-.015em;-webkit-tap-highlight-color:transparent}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';width:1.7rem;height:1.7rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:1.05rem;font-weight:500;color:var(--clay);transition:transform var(--breath-8) var(--ease)}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .a{padding:0 0 20px;font-size:.98rem;color:var(--ink-2);max-width:58ch}

/* R · the call: three lines waiting for three answers */
.questions{list-style:none;counter-reset:q;margin:1.6rem 0 2rem;padding:0;max-width:640px}
.questions li{counter-increment:q;display:grid;grid-template-columns:2.2rem auto minmax(2rem,1fr);align-items:baseline;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.questions li::before{content:'0' counter(q);font:700 .72rem/1 var(--mono);color:var(--clay);font-variant-numeric:tabular-nums}
.questions .q{font:600 1.15rem/1.2 var(--display);letter-spacing:-.02em}
.questions .rule{display:block;height:0;border-bottom:1.5px dotted var(--muted)}
.cta-meta{margin-top:1.4rem;font:400 .7rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}

/* foot */
.foot{padding:40px var(--gut) 34px;font-size:.82rem;color:var(--ink-2);border-top:1px solid var(--line)}
.foot p{max-width:70ch}
.foot-mark{font:700 .95rem/1 var(--display);letter-spacing:.16em}
.foot-note{margin-top:8px;font:400 .66rem/1.6 var(--mono);letter-spacing:.04em;color:var(--muted)}

/* the booking dialog */
dialog.book{border:1px solid var(--line);border-radius:0;padding:0;width:min(640px,calc(100% - 32px));background:var(--paper);color:var(--ink);box-shadow:0 40px 80px -40px rgba(28,25,23,.6);max-height:calc(100vh - 32px);overflow:auto}
dialog.book::backdrop{background:rgba(28,25,23,.55);backdrop-filter:blur(3px)}
.book-head{padding:28px 30px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.book-head h3{margin-top:8px;font-size:1.9rem;letter-spacing:-.03em}
.book-head p{color:var(--ink-2);font-size:.92rem;margin-top:8px;max-width:44ch}
.x{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:1rem;color:var(--ink);display:grid;place-items:center}
.book form{padding:22px 30px 30px;display:grid;gap:20px}
.field{display:grid;gap:8px}
.field>label,.field>.lbl{font:650 .64rem/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{font:inherit;font-size:.95rem;padding:11px 13px;border:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--ink)}
.field textarea{min-height:84px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.platforms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.platforms label,.slots label{position:relative;cursor:pointer}
.platforms input,.slots input{position:absolute;opacity:0;width:1px;height:1px}
.platforms .opt{display:grid;gap:2px;padding:12px 8px;border:1px solid var(--line);text-align:center;font-size:.82rem;font-weight:600;background:#fff}
.platforms .opt small{font:400 .58rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.platforms input:checked+.opt,.slots input:checked+.opt{border-color:var(--clay);background:color-mix(in srgb,var(--clay) 10%,#fff)}
.platforms input:focus-visible+.opt,.slots input:focus-visible+.opt{outline:2px solid var(--ink);outline-offset:2px}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slots .opt{display:inline-block;padding:8px 12px;border:1px solid var(--line);background:#fff;font:400 .8rem/1 var(--mono)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink-2)}
.consent input{margin-top:4px;accent-color:var(--clay)}
.privacy{font:400 .62rem/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.book-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.book-done{padding:36px 30px 32px;display:grid;gap:14px}
.book-done h3{font-size:1.9rem;letter-spacing:-.03em}
.book-done .small{font-size:.92rem;color:var(--ink-2)}
.sum{display:grid;gap:6px;padding:16px 18px;background:#fff;border:1px solid var(--line);font-size:.92rem}
.sum div{display:flex;justify-content:space-between;gap:16px}
.sum span:first-child{font:400 .62rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.monoaddr{font:400 .9rem/1.4 var(--mono);word-break:break-all}

@media (max-width:1024px){
  .split,.split.rev{grid-template-columns:1fr}
  .row{grid-template-columns:44px 1fr;gap:8px 18px}
  .row p,.row .tags{grid-column:2}
  .row .tags{display:flex;flex-wrap:wrap;gap:4px 12px}
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(2){border-right:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .explorer{grid-template-columns:1fr}
  .guide .wrap{grid-template-columns:1fr}
}
@media (max-width:899px){
  :root{--bar-h:58px}
  .links{display:none}
  .bar.open .links{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;padding:14px var(--gut) 20px;background:var(--paper);border-bottom:1px solid var(--line);font-size:12px;gap:4px;margin:0}
  .bar.open .links a{padding:10px 0}
  .bar.open .links .write{margin-top:8px;justify-content:center}
  .burger{display:grid}
  /* the phone: the pool is cut to 4:3 around the figure and the pavilion (the whole 2.37:1 frame would be a 165px strip), the veil floats higher over it */
  .hero .frame{aspect-ratio:4/3}
  .hero .wrap{grid-template-columns:1fr;padding-top:0;margin-top:-56px;padding-bottom:36px;gap:16px}
  .kalup img{aspect-ratio:4/3;object-fit:cover}
  .veil{padding:22px 20px 20px}
  .cards{width:auto;justify-self:stretch;grid-template-columns:1fr 1fr}
  .fcard{animation:none}
  .meanings{grid-template-columns:1fr}
  .meaning{border-right:0;border-bottom:1px solid var(--line);padding:18px 0}
  .meaning:not(:first-child){padding-left:0}
  .pools{grid-template-columns:1fr}
  .pool.wide .pic img{aspect-ratio:16/10}
  .sense{grid-template-columns:1fr;gap:3px}
  .guide{min-height:0}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr;gap:10px}
  .platforms{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
  .book-head,.book form,.book-done{padding-inline:18px}
}

/* ---------- the look, after Kave Home: white and air, one light grotesk for everything, small tracked capitals where the mono labels were, black buttons ---------- */
:root{--paper:#FFFFFF;--paper-2:#F6F4F0;--ink:#1A1A1A;--ink-2:#4B4946;--muted:#8B8780;--line:rgba(26,26,26,.12);
  --display:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;--mono:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif}
body{font-weight:300;line-height:1.65}
strong,b{font-weight:500}
h1,h2,h3{font-weight:300;letter-spacing:-.02em;line-height:1.04}
.hero-title,.h2{letter-spacing:-.022em;line-height:1.04}
.hero-title em{font-weight:400}
.hero-who{font-weight:400}
.plain{font-weight:300}
.lbl{font-weight:500;letter-spacing:.16em}
.links{font-weight:400;letter-spacing:.14em;font-size:11.5px}
.lang{font-weight:500;letter-spacing:.14em}
.hero-meta,.kalup figcaption,.state .i,.crisis{letter-spacing:.14em}
.mark{font-weight:600;letter-spacing:.24em}
.names .pill{font-weight:400}
.meaning dt,.fcard b,.pair .m p{font-weight:500}
.btn{background:var(--ink);border-color:var(--ink);font-weight:500;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}
.btn:hover{background:var(--clay);border-color:var(--clay);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.links .write{background:var(--ink);border-color:var(--ink);font-weight:500;letter-spacing:.14em}
.links .write:hover{background:var(--clay);border-color:var(--clay)}
.manifesto{font-weight:300}
.manifesto em{font-weight:400}
.word{font-weight:500}
.big{font-weight:300}

/* ---------- pages: the landing holds the essentials, four pages hold the rest ---------- */
body.sub main{padding-top:var(--bar-h)}
.manifesto-more{margin:1.4rem 0 0}
.more{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(32px,5vw,56px)}
.more .fcard:nth-child(3){animation-delay:calc(-.5 * var(--breath))}
.more .fcard:nth-child(4){animation-delay:calc(-1.5 * var(--breath))}
@media (max-width:899px){.more{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.more{grid-template-columns:1fr}}

/* ---------- the reflections breathe: on the inhale the mirror image comes closer, sharper and darker; on the exhale it drifts away, fades and blurs; the waver stays in it ---------- */
@keyframes mirror-breathe{
  0%,100%{transform:scaleY(-1) skewX(0deg) translateY(0);opacity:.07;filter:blur(1.4px)}
  25%{transform:scaleY(-.96) skewX(1deg) translateY(-.02em)}
  50%{transform:scaleY(-.8) skewX(0deg) translateY(-.05em);opacity:.4;filter:blur(.2px)}
  75%{transform:scaleY(-.96) skewX(-.8deg) translateY(-.02em)}
}
.refl .mirror{animation:mirror-breathe var(--breath-2) var(--ease) infinite}
@keyframes photo-breathe{
  0%,100%{transform:scaleY(-1) skewX(0);opacity:.18;filter:blur(2px)}
  40%{transform:scaleY(-.95) skewX(1deg)}
  50%{transform:scaleY(-.88) skewX(0);opacity:.5;filter:blur(.6px)}
  70%{transform:scaleY(-.96) skewX(-.8deg)}
}
.pool .rf img{animation:photo-breathe var(--breath-2) var(--ease) infinite}
@media (prefers-reduced-motion:reduce){.refl .mirror,.pool .rf img{animation:none}}

/* ---------- the whole page breathes: a warm light at the edges that deepens on every exhale, photographs that come closer or brighten,
   the rings of the mark, and a pulse around the call to talk. One rhythm, every page, every moment. ---------- */
body::after{content:'';position:fixed;inset:0;z-index:40;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(120% 95% at 50% 42%,rgba(205,186,165,.5) 0%,rgba(170,150,130,.55) 60%,rgba(120,100,82,.7) 100%);animation:light-breathe var(--breath) var(--ease) infinite alternate}
@keyframes light-breathe{from{opacity:.05}to{opacity:1}}
.kalup picture{display:block;overflow:hidden}
.kalup img{animation:breathe-deep var(--breath) var(--ease) infinite alternate}
.pool .pic>img{animation:photo-light var(--breath) var(--ease) infinite alternate}
@keyframes photo-light{from{filter:brightness(.97) saturate(.96)}to{filter:brightness(1.12) saturate(1.1)}}
.mark svg{overflow:visible}
.mark svg .r2{animation:ring-2 var(--breath) var(--ease) infinite alternate}
.mark svg .r3{animation:ring-3 var(--breath) var(--ease) infinite alternate}
@keyframes ring-2{from{transform:scale(1);opacity:1}to{transform:scale(1.3);opacity:.6}}
@keyframes ring-3{from{transform:scale(1);opacity:1}to{transform:scale(1.7);opacity:.15}}
.mark:hover svg .r2,.mark:hover svg .r3{animation-play-state:paused}
.btn:not(.ghost){animation:cta-breathe var(--breath) var(--ease) infinite alternate}
@keyframes cta-breathe{from{box-shadow:0 0 0 0 rgba(26,26,26,.3)}to{box-shadow:0 0 0 14px rgba(26,26,26,0)}}
@media (prefers-reduced-motion:reduce){body::after{display:none}.kalup img,.pool .pic>img,.mark svg .r2,.mark svg .r3,.btn:not(.ghost){animation:none}}

/* ---------- arrows are drawn, not typed: a text ↗ turns into an emoji on iOS ---------- */
.arr{display:inline-block;width:.72em;height:.72em;vertical-align:-.02em;margin-left:.1em}
.fcard i .arr{width:13px;height:13px;margin:0}
.plink .arr{margin-left:.3em}