/* The Resonance Ritual: brand layer (2026-09), translating the printed material to the web.
   Glacial Indifference (bold caps for headings, italic for sub-lines), the grainy sunset gradient,
   warm paper surfaces with terracotta ink, and the arrow sign as the call to action. */

@font-face{font-family:"Glacial Indifference";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/glacial-indifference-regular.woff2) format("woff2"),url(/fonts/glacial-indifference-regular.woff) format("woff")}
@font-face{font-family:"Glacial Indifference";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/glacial-indifference-bold.woff2) format("woff2"),url(/fonts/glacial-indifference-bold.woff) format("woff")}

:root{
  /* brand palette */
  --rr-paper:#fbf7f2;
  --rr-paper-2:#f6ede3;
  --rr-ink:#7a3528;          /* body text, 8.3:1 on paper */
  --rr-terra:#a64b38;        /* headings, buttons, links, 5.3:1 on paper */
  --rr-terra-deep:#8c3d2e;
  --rr-glow:#f16526;         /* gradient orange, decorative only */
  --rr-rose:#e8708a;         /* gradient pink, decorative only */
  --rr-sun:#e9b949;          /* gradient yellow, decorative only */
  --rr-sage-print:#9c9a7c;   /* gradient sage, decorative only */
  --rr-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* the existing design tokens, re-pointed to the brand */
  --rr-cream:var(--rr-paper);
  --rr-cream-2:var(--rr-paper-2);
  --rr-cream-3:#ecdccc;
  --rr-slate:var(--rr-ink);
  --rr-slate-2:#5e2a20;
  --rr-slate-soft:#9a4433;
  --rr-sage:var(--rr-terra);
  --rr-sage-deep:var(--rr-terra-deep);
  --rr-sage-soft:#f3c9b8;
  --rr-terracotta:var(--rr-terra);
  --rr-rust:var(--rr-terra);
  --rr-wine:var(--rr-terra-deep);
  --rr-teal:var(--rr-terra-deep);
  --rr-kilim-teal:var(--rr-terra-deep);
  --rr-kilim-teal-2:var(--rr-terra);
  --rr-ochre:#c2702a;
  --color-bg:var(--rr-paper);
  --color-bg-warm:var(--rr-paper-2);
  --color-card:#ffffff;
  --color-fg:var(--rr-ink);
  --color-fg-2:#8f4636;
  --color-fg-3:#9d5a47;
  --color-rule:rgba(122,53,40,.16);
  --color-rule-soft:rgba(122,53,40,.08);
  --color-accent:var(--rr-terra);
  --color-accent-deep:var(--rr-terra-deep);
  --color-accent-warm:var(--rr-terra);
  --font-display:"Glacial Indifference","Century Gothic","Futura",system-ui,sans-serif;
  --font-body:"Glacial Indifference","Century Gothic","Futura",system-ui,sans-serif;
  --tracking-body:0.01em;
}

body{font-size:17px;line-height:1.6}
::selection{background:#f7c9b6;color:var(--rr-ink)}
.rr-progress{background:linear-gradient(90deg,var(--rr-glow),var(--rr-rose),var(--rr-sun))}

/* ---------- typography: the print hierarchy ---------- */
/* Big headings: bold capitals with wide spacing (as "SOUND BATH") */
h1,h2{font-family:var(--font-display)!important;font-style:normal!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.14em!important;line-height:1.18!important;text-wrap:balance}
h1{font-size:clamp(1.9rem,3.6vw,3rem)!important}
h2{font-size:clamp(1.4rem,2.4vw,1.95rem)!important}
/* The italic part of a heading drops to its own line, like "Eine kleine Pause." under the title */
/* The italic part of a heading: lighter italic capitals, like the name in the logo */
h1 em,h2 em{font-style:italic;font-weight:400}
/* ...or on its own line, like "Eine kleine Pause." under "SOUND BATH" (homepage + footer) */
.rr-split em{display:block;text-transform:none;letter-spacing:.01em;font-size:max(.62em,1.12rem);line-height:1.35;margin-top:.55em}
/* headings on paper are terracotta, like the letter */
main h1[style*="color:var(--rr-slate)"],main h2[style*="color:var(--rr-slate)"]{color:var(--rr-terra)!important}
/* Glacial Indifference has a smaller x-height than the old body font: one pixel more everywhere */
main [style*="font-size:16px"],footer [style*="font-size:16px"]{font-size:17px!important}
main [style*="font-size:15px"]{font-size:16px!important}
main [style*="font-size:14px"],footer [style*="font-size:14px"]{font-size:15px!important}
main [style*="font-size:13px"],footer [style*="font-size:13px"]{font-size:14.5px!important}
main [style*="font-size:12px"],footer [style*="font-size:12px"]{font-size:13px!important}
main [style*="font-size:11px"]{font-size:12px!important}
/* Card and item titles: bold, sentence case (as "Rest is not a reward.") */
h3{font-style:normal!important;font-weight:700!important;letter-spacing:.005em!important}
.rr-legal h2{text-transform:none;letter-spacing:.01em!important;font-size:1.15rem!important}
.rr-legal h1{color:var(--rr-terra)}
main label{font-weight:700}
.rr-eyebrow,.rr-h1-kicker{font-family:var(--font-body);font-weight:700;letter-spacing:.2em;color:var(--rr-terra)}
/* small spaced capitals (labels) are bold, like "Dienstags" and "Termine + Buchung" on the poster */
main [style*="text-transform:uppercase"],.rr-off-sum,.rr-mono{font-weight:700!important}
/* print has square edges: cards, panels, photos, fields */
.rr-offering,.rr-tier-card,main [style*="border-radius:8px"],main [style*="border-radius:6px"],main [style*="border-radius:4px"],main input,main textarea,main select{border-radius:0!important}

/* ---------- the grainy gradient surface ---------- */
.rr-gradient{position:relative;isolation:isolate;background:var(--rr-glow) url(/assets/brand/gradient-wide.webp) center/cover no-repeat}
.rr-gradient::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--rr-grain);background-size:220px;mix-blend-mode:overlay;opacity:.55;pointer-events:none}
.rr-gradient--card{background-image:url(/assets/brand/gradient-card.webp)}

/* logo pieces, coloured by CSS (currentColor) */
.rr-mark,.rr-wordmark,.rr-logo{display:inline-block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;flex:none}
.rr-mark{--m:url(/assets/brand/mark.svg);width:27px;height:35px}
.rr-wordmark{--m:url(/assets/brand/wordmark.svg);width:176px;height:12px}
.rr-logo{--m:url(/assets/brand/logo.svg);width:150px;height:134px}

/* ---------- buttons: taken from the arrow sign ---------- */
.rr-btn{font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1;border-radius:0;padding:15px 36px 15px 22px;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%);transition:background .18s,color .18s,transform .18s}
.rr-btn:hover{transform:translateX(3px)}
.rr-btn--primary{background:var(--rr-terra);color:#fff}
.rr-btn--primary:hover{background:var(--rr-terra-deep)}
.rr-btn--on-dark{background:#fff;color:var(--rr-terra)}
.rr-btn--on-dark:hover{background:#fff;color:var(--rr-terra-deep)}
.rr-btn svg{display:none}
/* the hero call to action is the sign itself: a white bar with an arrow head, italic text */
.rr-sign{position:relative;display:inline-flex;align-items:center;gap:0;text-decoration:none;color:var(--rr-terra);font-family:var(--font-body);font-style:italic;font-size:clamp(1.05rem,1.4vw,1.25rem);letter-spacing:.02em;filter:drop-shadow(0 6px 18px rgba(110,35,15,.18));transition:transform .2s}
.rr-sign-bar{background:#fff;padding:14px 26px 14px 30px;white-space:nowrap}
.rr-sign-head{width:34px;height:58px;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);margin-left:-1px}
.rr-sign:hover{transform:translateX(5px)}
.rr-sign:focus-visible{outline:2px solid #fff;outline-offset:6px}

/* ---------- navigation ---------- */
.rr-nav [data-logo]{gap:12px!important;color:var(--rr-terra)}
.rr-navlink{font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rr-terra)}
.rr-navlink:hover,.rr-navlink.is-active{color:var(--rr-ink)}
.rr-navlink-underline{background:var(--rr-terra)}
.rr-nav.is-scrolled{background:rgba(251,247,242,.92)}
.rr-lang{font-weight:700;letter-spacing:.14em}
.rr-lang-on{color:var(--rr-terra)}
.rr-nav-burger{color:var(--rr-terra)!important}
.rr-nav-mobile{background:var(--rr-paper)!important}
.rr-nav-mobile>a:not(.rr-btn){font-style:normal!important;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:17px!important;color:var(--rr-terra)!important}
/* over the gradient hero: white, and the small logo waits until the big one has scrolled away */
.rr-has-dark-hero .rr-nav:not(.is-scrolled) [data-logo]{opacity:0;pointer-events:none}
.rr-has-dark-hero .rr-nav:not(.is-scrolled) .rr-navlink,.rr-has-dark-hero .rr-nav:not(.is-scrolled) .rr-lang-on{color:#fff}
.rr-has-dark-hero .rr-nav:not(.is-scrolled) .rr-lang-off,.rr-has-dark-hero .rr-nav:not(.is-scrolled) .rr-lang-sep{color:rgba(255,255,255,.8)}
.rr-has-dark-hero .rr-nav:not(.is-scrolled) .rr-navlink-underline{background:#fff}
.rr-has-dark-hero .rr-nav:not(.is-scrolled) .rr-nav-burger{color:#fff!important}
.rr-has-dark-hero .rr-nav:not(.is-scrolled) .rr-btn--primary{background:#fff;color:var(--rr-terra)}
@media (min-width:721px){.rr-has-dark-hero .rr-nav:not(.is-scrolled) .rr-nav-cta .rr-btn{opacity:0;pointer-events:none}}
.rr-nav-cta .rr-btn{transition:opacity .3s,background .18s,transform .18s}
.rr-nav [data-logo]{transition:opacity .3s}

/* ---------- homepage hero, laid out like the poster ---------- */
.rr-poster{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:48px;color:#fff;overflow:hidden;padding:clamp(96px,13vh,132px) clamp(24px,6vw,72px) clamp(32px,6vh,56px)}
.rr-hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(96,30,14,.12) 0%,rgba(96,30,14,0) 26%,rgba(96,30,14,0) 52%,rgba(96,30,14,.42) 100%);mix-blend-mode:multiply}
.rr-hero-top{display:flex;flex-direction:column;align-items:center;text-align:center;margin:auto 0}
.rr-poster .rr-logo{color:#fff;width:clamp(104px,11vw,150px);height:clamp(93px,9.8vw,134px);margin-bottom:clamp(28px,4.5vh,48px)}
.rr-poster .rr-hero-title{margin:0;color:#fff;font-size:clamp(2.6rem,7.2vw,6rem)!important;letter-spacing:.2em!important;line-height:1.02!important;text-shadow:0 2px 30px rgba(120,40,20,.22)}
.rr-hero-title-main{display:block;margin-right:-.2em}
.rr-hero-title-place{display:block;font-size:clamp(.8rem,1.1vw,.98rem);letter-spacing:.34em;margin-top:1.4em;margin-right:-.34em}
.rr-hero-tagline{font-style:italic;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.4;margin:clamp(22px,3.4vh,34px) auto 0;max-width:none;text-shadow:0 1px 18px rgba(120,40,20,.25)}
.rr-hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.rr-hero-times{display:grid;grid-template-columns:auto auto;column-gap:44px;row-gap:14px;font-size:clamp(15px,1.25vw,17px);line-height:1.35;text-shadow:0 1px 10px rgba(96,30,14,.3)}
.rr-hero-times>strong{grid-column:1/-1;font-size:clamp(16px,1.35vw,18px);letter-spacing:.02em}
.rr-hero-times span b{display:block;font-weight:400;letter-spacing:.04em}
.rr-hero-times .rr-hero-price{grid-column:1/-1}
.rr-hero-book{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.rr-hero-book small{color:#fff;font-size:13px;letter-spacing:.06em;text-shadow:0 1px 10px rgba(96,30,14,.3)}
@media (max-width:800px){
  .rr-gradient.rr-poster{background-image:url(/assets/brand/gradient-tall.webp);background-position:center 30%}
  .rr-poster{gap:36px}
  .rr-hero-foot{flex-direction:column;align-items:flex-start}
  .rr-hero-book{align-items:flex-start}
  .rr-hero-times{column-gap:28px}
}

/* ---------- Tuesday sessions (paper) with the flyer card ---------- */
#offerings{background:var(--rr-paper-2)!important;color:var(--rr-ink)!important}
#offerings .rr-weekly-text p{color:var(--rr-ink)!important}
.rr-choose{background:#fff;box-shadow:0 1px 2px rgba(122,53,40,.08),0 18px 40px -18px rgba(122,53,40,.28);border-radius:0!important;padding:0!important;min-height:0!important}
.rr-choose:hover{transform:none!important}
.rr-choose-top{color:#fff;padding:clamp(26px,3vw,34px) clamp(22px,2.6vw,30px) clamp(24px,2.8vw,30px)}
.rr-choose-top::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(96,30,14,0) 30%,rgba(96,30,14,.28));mix-blend-mode:multiply}
.rr-choose-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.rr-choose-top h3{margin:12px 0 0;font-size:clamp(1.5rem,2.2vw,1.85rem)!important;line-height:1.15;color:#fff}
.rr-choose-sub{font-style:italic;font-size:17px;margin:6px 0 0}
.rr-choose-body{padding:6px clamp(22px,2.6vw,30px) clamp(18px,2.2vw,24px)}
.rr-choose-meta{font-size:14px;color:var(--color-fg-2);padding:14px 0 4px;letter-spacing:.02em}
#offerings .rr-slot-name{font-family:var(--font-body)!important;font-style:normal!important;font-weight:700!important;font-size:17px!important;color:var(--rr-ink)!important}
#offerings .rr-slot-time{font-size:14px!important}
#offerings .rr-slot .rr-btn{padding:12px 30px 12px 18px;font-size:12px}

/* gradient card (teams & studios on the Offerings page) */
.rr-card-glow{color:#fff!important;box-shadow:0 18px 40px -18px rgba(122,53,40,.45)!important}
.rr-card-glow::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(92,28,12,.34);mix-blend-mode:multiply}
.rr-card-glow [style*="color"],.rr-card-glow .rr-off-sum{color:#fff!important}
.rr-card-glow [style*="border-top"],.rr-card-glow details{border-top-color:rgba(255,255,255,.35)!important}
.rr-card-glow .rr-btn--on-dark{background:#fff;color:var(--rr-terra)!important}

/* ---------- what to expect: the logo's dots on a line ---------- */
#what-to-expect .rr-tl-dot{width:12px!important;height:12px!important;border:0!important;background:var(--rr-terra)!important}
#what-to-expect .rr-tl::before{background:var(--rr-terra)!important;opacity:.35}
#what-to-expect .rr-tl-label{font-style:normal!important;font-weight:700!important;letter-spacing:.14em;text-transform:uppercase;font-size:14px!important;color:var(--rr-terra)!important}
#what-to-expect .rr-tl-desc{font-size:15px!important;color:var(--rr-ink)!important}

/* ---------- photos: one clear job each ---------- */
.rr-mono{font-family:var(--font-body)!important;letter-spacing:.14em;text-transform:uppercase}
.rr-photo-band{margin:0;position:relative}
.rr-photo-band img{display:block;width:100%;height:auto}
/* the room (homepage): full width, a quiet caption like a flyer line */
.rr-room-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(60,22,10,0) 50%,rgba(60,22,10,.5));pointer-events:none}
.rr-room-band figcaption{position:absolute;z-index:1;left:clamp(24px,6vw,64px);right:clamp(24px,6vw,64px);bottom:clamp(20px,3.4vw,40px);color:#fff;font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:13px;text-shadow:0 1px 14px rgba(40,15,8,.5)}
.rr-room-band figcaption em{display:block;font-weight:400;text-transform:none;letter-spacing:.01em;font-size:clamp(17px,1.6vw,21px);margin-top:6px}
/* the host (homepage) */
.rr-host{padding:clamp(64px,10vh,120px) clamp(24px,6vw,64px);background:var(--rr-paper-2)}
.rr-host-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center}
.rr-host-photo{margin:0}
.rr-host-photo img,.rr-faq-photo img,.rr-contact-photo img{display:block;width:100%;height:auto;box-shadow:0 18px 40px -18px rgba(122,53,40,.35)}
.rr-host h2{color:var(--rr-terra);margin:12px 0 0}
.rr-host-text p{font-size:17px;line-height:1.7;color:var(--rr-ink);max-width:48ch;margin:20px 0 24px}
.rr-link{font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--rr-terra);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.rr-link:hover{color:var(--rr-terra-deep)}
@media (max-width:800px){.rr-host-inner{grid-template-columns:1fr}.rr-host-photo{max-width:420px}}
/* offerings: photo on top of the two Tuesday cards (daylight / candlelight) */
.rr-card-photo{margin:calc(-1 * clamp(22px,2.4vw,30px)) calc(-1 * clamp(22px,2.4vw,30px)) 22px}
.rr-card-photo img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover}
.rr-has-photo>span[aria-hidden="true"][style*="height:3px"]{display:none}
/* about: the loft group, after the training photos */
.rr-about-group{margin:48px 0 0}
.rr-about-group img{display:block;width:100%;height:auto;box-shadow:0 18px 40px -18px rgba(122,53,40,.35)}
.rr-about-group figcaption{margin-top:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--rr-terra)}
.rr-about-group figcaption em{display:block;font-weight:400;text-transform:none;letter-spacing:.01em;font-size:16px;margin-top:4px;color:var(--rr-ink)}
/* schedule: your mat, above the calendar */
.rr-sched-photo{margin:0 0 32px}
/* faq: the instruments next to the questions */
.rr-faq-photo{margin:36px 0 0;max-width:360px}
@media (max-width:900px){.rr-faq-photo{display:none}}
/* contact: the invitation beside the form */
.rr-contact-split{max-width:1160px!important;display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.rr-contact-photo{margin:40px 0 0;position:sticky;top:110px}
.rr-contact-photo img{aspect-ratio:4/5;object-fit:cover;object-position:55% 50%}
@media (max-width:900px){.rr-contact-split{grid-template-columns:1fr}.rr-contact-photo{position:static;margin:8px 0 0;max-width:420px}}

/* ---------- footer: the gradient again, like the back of a flyer ---------- */
footer#contact{position:relative;isolation:isolate;background:var(--rr-glow) url(/assets/brand/gradient-band.webp) center/cover no-repeat!important;color:#fff!important}
footer#contact::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(92,28,12,.36);mix-blend-mode:multiply}
footer#contact::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--rr-grain);background-size:220px;mix-blend-mode:overlay;opacity:.5}
footer#contact .rr-footer-top>div>p:first-child{font-family:var(--font-display)!important;font-style:normal!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(1.5rem,2.6vw,2.1rem)!important;color:#fff!important}
footer#contact .rr-footer-top>div>p:first-child em{display:block;font-size:max(.62em,1.12rem);line-height:1.35;font-style:italic;font-weight:400;text-transform:none;letter-spacing:.01em;margin-top:.5em}
footer#contact p,footer#contact li,footer#contact li span,footer#contact small,footer#contact span[style*="italic"]{color:#fff!important}
footer#contact ul{font-size:14.5px!important;gap:10px!important}
footer#contact a{color:#fff!important;border-bottom-color:rgba(255,255,255,.5)!important}
footer#contact .rr-footer-cols span[style*="uppercase"]{color:#fff!important;font-weight:700!important;letter-spacing:.2em!important}
footer#contact .rr-mark{color:#fff}
footer#contact .rr-btn--on-dark{background:#fff;color:var(--rr-terra)!important}