/* sonetia-public-20261106-r10 */
/* Shared details for the public edition. */
.mist-footer .footer-testing {display:block;margin:.7rem 1rem 0;letter-spacing:.035em;line-height:1.5;text-transform:none;}
#miniatura {scroll-margin-top:6rem;}
.not-found {min-height:80vh;display:grid;align-content:center;padding:2rem max(1.25rem,8vw);text-align:left;gap:1rem;}
.not-found h1 {font-size:clamp(2.5rem,8vw,6rem);margin:0;}
.not-found .primary {justify-self:start;}

/* Public Sonetia: a continuous scene, with the photo fading into the hero. */
.public-home .welcome-header{border-bottom:1px solid #e6e0d6;background:#fffdfa}
.public-home .welcome-header>.site-width{min-height:76px}
.sonetia-hero{position:relative;isolation:isolate;display:grid;min-height:min(710px,calc(100svh - 76px));overflow:hidden;background:#141312;color:#fcf9f1}
.sonetia-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:1440px;width:100%;margin:auto;padding:clamp(40px,6vw,86px) clamp(22px,6vw,86px) 26px}
.sonetia-hero-copy{position:relative;max-width:670px}
.hero-photo{position:absolute;z-index:-1;inset:0;overflow:hidden;isolation:isolate;background:#141312}
.hero-photo img{position:absolute;right:0;top:50%;transform:translateY(-50%);display:block;width:min(68%,1000px);height:min(115%,1000px);object-fit:contain;object-position:right center;mix-blend-mode:screen;filter:grayscale(1);opacity:.8;mask-image:linear-gradient(to right,transparent,#000 21%,#000 93%,#000d)}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#141312 0%,#141312f7 29%,#14131276 51%,transparent 75%),linear-gradient(0deg,#141312 0%,transparent 17%);pointer-events:none}
.hero-signature{font:600 clamp(2.5rem,5vw,4.6rem)/.87 Georgia,serif;letter-spacing:-.075em;color:#fffaf0;margin:0 0 28px}
.hero-signature span{color:#c5a878}
.hero-label{margin:0 0 13px;color:#e1cba9;font-weight:700;font-size:.69rem;letter-spacing:.2em;text-transform:uppercase}
.sonetia-hero h1{margin:0;color:#fcf9f1;font:500 clamp(2.95rem,6vw,5.8rem)/.99 var(--display,Georgia,serif);letter-spacing:-.055em;max-width:740px}
.hero-intro{margin:24px 0 0;color:#e7dfd4;font-size:clamp(.98rem,1.4vw,1.14rem);line-height:1.65;max-width:42ch}
.hero-actions{display:flex;align-items:center;gap:14px 25px;margin-top:27px;flex-wrap:wrap}
.hero-primary,.hero-secondary{min-height:49px;display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;font-size:.88rem;font-weight:720}
.hero-primary{padding:10px 17px;border-radius:4px;background:#f3e7d3;color:#231e18}
.hero-primary:hover{background:#fff8ea;color:#231e18}
.hero-secondary{color:#fcf9f1;border-bottom:1px solid #cfb897}
.hero-secondary:hover{color:#e9d2a8}
.hero-primary:focus-visible,.hero-secondary:focus-visible{outline:3px solid #f5d69e;outline-offset:4px}
.hero-caption{display:flex;align-items:center;gap:10px;margin:clamp(30px,5vw,65px) 0 0;color:#cbbba6;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase}
.hero-caption span{display:inline-block;width:28px;height:1px;background:#ab8f6b}
.public-home .editorial-directory{padding:clamp(42px,6.5vw,90px) 0;background:#f8f5ef}
.public-home .editorial-directory .public-directory>a:first-child{padding-left:30px}
.public-home .editorial-directory .public-directory>a:hover{background:#ede7da}
.public-home .editorial-directory .public-directory>a:focus-visible{outline:3px solid #826441;outline-offset:2px}
.public-home .public-directory a h2{line-height:1.13}
@media(max-width:880px){
 .sonetia-hero{min-height:0}
 .sonetia-hero-inner{padding-top:60px}
 .hero-photo img{width:75%;height:100%;object-position:right center;opacity:.63}
 .hero-photo::after{background:linear-gradient(90deg,#141312 0%,#141312c7 36%,transparent 89%),linear-gradient(0deg,#141312 0%,transparent 25%)}
 .public-home .editorial-directory .public-directory>a:first-child{padding-left:0}
}
@media(max-width:620px){
 .public-home .welcome-header{margin:0;padding:0}
 .public-home .welcome-header>.site-width{min-height:0;padding-top:10px;padding-bottom:8px;gap:9px}
 .public-home .welcome-header nav{padding:5px 0 0;row-gap:0}
 .public-home .welcome-header nav a{padding:4px 0;line-height:1.45}
 .sonetia-hero-inner{padding-top:clamp(175px,49vw,260px);padding-bottom:24px}
 .sonetia-hero-copy{max-width:100%}
 .hero-photo img{top:0;transform:none;right:-5%;width:102%;height:clamp(285px,78vw,408px);object-position:right top;opacity:.8;mask-image:linear-gradient(to bottom,#000 47%,transparent 94%)}
 .hero-photo::after{background:linear-gradient(180deg,transparent 0,#141312 61%),linear-gradient(90deg,#14131268,transparent 72%)}
 .hero-signature{font-size:2.48rem;margin-bottom:19px}
 .sonetia-hero h1{font-size:clamp(2.65rem,10.4vw,4.1rem)}
 .hero-intro{margin-top:18px}
 .hero-actions{gap:9px 19px;margin-top:23px}
 .hero-caption{font-size:.63rem;margin-top:29px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

.home-guide {background: #fffdfa; padding: clamp(36px, 6vw, 86px) 0;}
.home-guide-inner {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(22px, 7vw, 100px);}
.home-guide h2, .help-content h1 {
  margin: .25em 0;
  font: 500 clamp(2.35rem, 5vw, 4.45rem)/1.05 var(--display, Georgia, serif);
  letter-spacing: -.045em;
}
.home-guide p, .home-facts dd, .help-content p {max-width: 60ch; line-height: 1.65; color: #4e473d;}
.home-facts {margin: 0;}
.home-facts div {padding: 1.05rem 0; border-bottom: 1px solid #e2dbce;}
.home-facts dt {font-weight: 720;}
.home-facts dd {margin: .38rem 0 0;}
.footer-links {position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: .55rem 1.3rem; margin: 1rem auto 0; font-size: .85rem;}
.footer-links a {color: inherit; text-underline-offset: .25em;}
.help-header {background: #fffdfa; border-bottom: 1px solid #ded8cc;}
.help-header .site-width, .help-header nav {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem 1.25rem;}
.help-header .site-width {padding-block: 14px;}
.help-brand {font: 700 2.25rem/1 Georgia, serif; letter-spacing: -.075em; text-decoration: none;}
.help-brand span {color: #9c7846;}
.help-content {padding-block: clamp(36px, 7vw, 94px);}
.help-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); gap: 1rem; margin-top: 2rem;}
.help-grid section {min-width: 0; padding: clamp(16px, 2.5vw, 32px); background: #fffdfa; border: 1px solid #ded8cc; border-radius: 10px;}
.help-grid h2 {font: 600 1.35rem/1.2 Georgia, serif;}
.help-grid p {margin: .75rem 0 1rem;}
@media (max-width: 660px) {.home-guide-inner {grid-template-columns: minmax(0, 1fr);}}

/* Shared public navigation and dark introductions */
.welcome-header.public-masthead {
  margin: 0;
  border-bottom: 1px solid #e6e0d6;
  background: #fffdfa;
}
.public-masthead > .site-width {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
  padding-block: 10px;
}
.sonetia-wordmark {
  color: #211f1c;
  font: 700 clamp(1.6rem, 2.75vw, 2.2rem)/1 Georgia, serif;
  letter-spacing: -.075em;
  text-decoration: none;
}
.sonetia-wordmark span {color: #9b7749;}
.public-masthead nav {
  justify-content: flex-end;
  margin: 0;
  gap: clamp(10px, 1.6vw, 23px);
}

.public-masthead .primary {margin: 0; background: #211f1c; color: #fffaf0; border-color: #211f1c;}
.public-masthead .primary:hover {background: #473b2d;}
.public-masthead a:focus-visible, .public-masthead button:focus-visible {outline: 3px solid #9b7749; outline-offset: 4px;}
.public-sub-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #141312;
  color: #fcf9f1;
}
.public-sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, #141312 14%, #141312ef 42%, #14131233 100%),
    linear-gradient(0deg, #141312, transparent 28%),
    url("/assets/piano-dark.webp") right center / auto 100% no-repeat;
}
.public-sub-inner {
  min-height: clamp(350px, 43vw, 530px);
  display: grid;
  align-items: center;
  gap: 2rem;
  padding-block: clamp(42px, 7vw, 96px);
}
.public-sub-copy {max-width: 740px;}
.public-sub-hero h1 {
  margin: 0;
  color: #fcf9f1;
  font: 500 clamp(2.7rem, 6.3vw, 5.65rem)/.99 var(--display, Georgia, serif);
  letter-spacing: -.055em;
}
.public-sub-lead {
  max-width: 48ch;
  margin: clamp(17px, 3vw, 26px) 0 0;
  color: #e7dfd4;
  font-size: clamp(.98rem, 1.4vw, 1.12rem);
  line-height: 1.65;
}
.public-sub-hero--materialy .public-sub-inner {grid-template-columns: minmax(0, 1fr) minmax(180px, .5fr);}
.public-sub-hero + .team-list {padding-top: clamp(36px, 6vw, 84px);}
.public-sub-hero + .lesson-gallery {padding-top: clamp(30px, 5vw, 66px);}
.public-sub-hero + .resource-inside {padding-top: clamp(30px, 5vw, 66px);}
.help-content {scroll-margin-top: 1rem;}
.help-content .help-grid {margin-top: 0;}
#publicSyllabus, #osoby, #sprobuj, #miniatura {scroll-margin-top: 1rem;}
@media (max-width: 970px) {
  .public-masthead > .site-width {grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 13px;}
  .public-masthead nav {grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; padding: 3px 0 0; gap: 2px 16px; flex-wrap: wrap;}
}
@media (max-width: 620px) {
  .public-masthead > .site-width {width: calc(100% - 30px);}
  .public-masthead nav {font-size: .75rem;}
  .public-masthead nav a {padding: 5px 0;}
  .public-masthead .primary {padding: 10px 12px;}
  .public-sub-hero::before {background-position: right center; opacity: .56;}
  .public-sub-inner {min-height: 0; padding-block: 48px 44px;}
  .public-sub-hero h1 {font-size: clamp(2.7rem, 10.2vw, 4rem);}
  .public-sub-hero--materialy .public-sub-inner {grid-template-columns: minmax(0, 1fr);}
}

/* One active mark, independently of hover. */
.public-masthead nav a:is(:hover,:active,:focus-visible,[aria-current="page"]) {text-decoration: none;}
.public-masthead nav a[aria-current="page"] {box-shadow: inset 0 -2px #9b7749; color: #211f1c;}
.sonetia-wordmark {display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;}
.sonetia-wordmark img {width: clamp(26px,4vw,36px); height: auto;}
.sonetia-wordmark .sonetia-wordmark-text {color: #211f1c;}

.public-sub-hero::before {background: radial-gradient(ellipse at 92% 42%,var(--hero-light,#423327),transparent 67%);}
.public-sub-hero--aplikacja {--hero-light:#4f4639;}
.public-sub-hero--lekcje {--hero-light:#3e4840;}
.public-sub-hero--program-kursu {--hero-light:#51402e;}
.public-sub-hero--materialy {--hero-light:#4b3b37;}
.public-sub-hero--zespol {--hero-light:#403734;}
.public-sub-hero--kontakt {--hero-light:#393943;}
.public-sub-hero .public-sub-inner {grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: clamp(22px,5vw,72px);}
.sub-visual {min-width: 0; margin: 0; color: #f5e8d0;}
.sub-visual--screen {padding: 10px 10px 0; background: #25211c; border: 1px solid #ead5a644; border-radius: 10px; box-shadow: 0 18px 48px #0005;}
.sub-visual--screen img {display: block; width: 100%; height: auto; border-radius: 5px;}
.sub-visual--screen figcaption {padding: 9px 4px; color: #d9c5a5; font-size: .8rem;}
.sub-visual--lesson {background: #263028;}
.sub-visual--steps,.sub-visual--contact {display:grid; gap:0; border-block:1px solid #d8b98566;}
.sub-visual--steps span,.sub-visual--contact span {padding:.85rem 0; border-bottom:1px solid #d8b98540;}
.sub-visual--steps span:last-child,.sub-visual--contact span:last-child {border-bottom:0;}
.sub-visual--steps b,.sub-visual--contact span {color:#e1bf87; letter-spacing:.09em;}
.sub-visual--steps b {display:inline-block; width:3rem;}
.sub-visual--contact>b {padding:1rem 0; font-family:var(--display,Georgia,serif); font-size:1.55rem;}
.sub-visual--contact strong {margin-inline-start:.8rem; color:#f5e8d0; font-weight:500; letter-spacing:0;}
.sub-visual--staff {padding:1.5rem; border:1px solid #d8b98566; border-radius:8px; background:#20191588;}
.sub-visual--staff span {font-size:.72rem; letter-spacing:.18em; color:#e0c396;}
.sub-visual--staff img {display:block; width:100%; height:auto; margin-top:.8rem;}
.sub-visual--team {border-block:1px solid #d8b98577; padding-block:1.2rem;}
.sub-visual--team span {display:block; font:500 clamp(2.8rem,7vw,6.3rem)/1 var(--display,Georgia,serif); letter-spacing:-.06em;}
.sub-visual--team div {display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1.3rem;}
.sub-visual--team b {border-top:2px solid #b68f59; padding-top:.5rem; color:#d8b985; font-size:.82rem; font-weight:500;}
.public-voice {margin-block:clamp(26px,5vw,62px); padding:clamp(18px,4vw,42px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(15px,4vw,46px); background:#fbf7f0; border:1px solid #e4dacb; border-radius:10px;}
.public-voice h2 {margin:.3rem 0 .5rem; font-family:var(--display,Georgia,serif);}
.public-voice p {margin:.55rem 0; line-height:1.65;}
.public-voice-player summary {cursor:pointer; font-weight:650;}
.public-score-viewport {display:block; height:auto; min-height:0; border-radius:5px; background:#fbf8f1; color:#28221b; padding:clamp(4px,2.2vw,15px);}
.public-score-viewport[hidden] {display:none;}
.public-score-viewport svg {display:block; width:100%; height:auto; overflow:visible; fill:currentColor;}
.public-score-viewport .notation-rule {stroke:#6f6659; stroke-width:1.25; fill:none;}
.public-score-viewport .preview-stem {stroke:currentColor; stroke-width:1.35; fill:none;}
.public-score-viewport [data-preview-note].is-current {color:#7a4b17;}
.public-score-viewport [data-preview-note].is-done {color:#696156;}
.public-score-viewport.has-error {background:#fbeee9;}
@media (max-width:760px) {
  .public-sub-hero .public-sub-inner,.public-voice {grid-template-columns:minmax(0,1fr);}
  .sub-visual {max-width:460px; width:100%;}
  .public-sub-hero .public-sub-inner {gap:1.5rem;}
  .public-voice {padding:1rem;}
}

.contact-block {
  margin-block:clamp(28px,5vw,62px);
  padding:clamp(18px,4vw,36px);
  background:#fffdfa;
  border:1px solid #dfd5c6;
  border-radius:10px;
}
.contact-block h2 {margin:.35rem 0 .7rem;}
.contact-block address {font-style:normal;line-height:1.8;overflow-wrap:anywhere;}
.legal-hero {background:#27211b;color:#f8efdf;padding:clamp(30px,6vw,72px) 0;}
.legal-hero h1 {color:#fff8ed;margin:.25em 0;font-size:clamp(2.25rem,7vw,4.7rem);line-height:1.03;}
.legal-hero .hero-label {color:#edc792;}
.legal-hero p:last-child {margin:0;max-width:65ch;color:#f2e3ce;}
.legal-document {
  max-width:850px;
  margin-block:clamp(24px,6vw,70px);
  padding:clamp(18px,4vw,50px);
  border:1px solid #dfd5c6;
  border-radius:12px;
  background:#fffdfa;
  color:#332c25;
  line-height:1.75;
  overflow-wrap:anywhere;
}
.legal-document h2 {margin:1.5em 0 .5em;font-size:clamp(1.35rem,3.5vw,2rem);line-height:1.2;}
.legal-document h2:first-child {margin-top:0;}
.legal-document ul {padding-left:1.25rem;}
.legal-document li + li {margin-top:.65rem;}
.legal-document a,.contact-block a {color:#6a4723;text-decoration:underline;text-underline-offset:.18em;}
.legal-storage {display:grid;gap:10px;}
.legal-storage div {background:#f7f1e8;padding:12px 15px;border-radius:7px;}
.legal-storage dt {font-weight:600;}
.legal-storage dd {margin:3px 0 0;}
.legal-references {margin-top:1.6em;padding-top:1em;border-top:1px solid #dfd5c6;font-size:.9rem;}

/* The engraving lives in its own column and keeps the same geometry at every size. */
.stay-card {
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(18px,5vw,80px);
  padding:clamp(24px,4.5vw,68px);
  background:radial-gradient(ellipse at 87% 40%,#2c241c 0,#181716 58%);
}
.stay-card::after {display:none;}
.stay-card > div {min-width:0;}
.stay-card .stay-staff {
  position:static;
  display:block;
  justify-self:center;
  width:min(100%,560px);
  height:auto;
  opacity:1;
}
.sub-visual--staff img {max-width:560px;}
@media(max-width:760px) {
  .stay-card {grid-template-columns:minmax(0,1fr);gap:16px;}
  .stay-card .stay-staff {justify-self:start;}
}
