/* "Meet Your Parts" gallery + fullscreen caption-sequence modal */
/* ---------- Gallery of parts (parts.html) ---------- */
.gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.gallery > li[hidden]{display:none}
.gcard{display:flex;flex-direction:column;height:100%;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.gcard:hover,.gcard:focus-visible{transform:translateY(-4px);border-color:var(--ochre);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.gimg{display:block;aspect-ratio:1/1;overflow:hidden;background:#150f11}
.gimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gcard:hover .gimg img,.gcard:focus-visible .gimg img{transform:scale(1.04)}
.gbody{display:flex;flex-direction:column;gap:.15rem;padding:1.05rem 1.2rem 1.2rem;flex:1}
.gname{--fs-p:1.3rem;--fam-p:var(--font-head);--fw-p:600;--c-p:var(--head);--fs-s:.98rem;--c-s:var(--ink-soft);gap:.1rem;line-height:1.25}
.gtag{--fs-p:.9rem;--c-p:var(--ink);--fs-s:.9rem;--c-s:var(--ink-soft);--fst-s:italic;gap:.3rem;margin-top:.7rem;line-height:1.4}
.gmore{margin-top:auto;padding-top:.9rem;color:var(--sienna);font-size:.92rem;font-weight:500}
.gmore i{font-style:normal;display:inline-block;transition:transform .2s}
.gcard:hover .gmore i{transform:translateX(4px)}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}}
@media (max-width:560px){
  .gallery{gap:.8rem}
  .gbody{padding:.75rem .85rem .9rem}
  .gname{--fs-p:1.05rem;--fs-s:.86rem}
  .gtag{display:none}
  .gmore{font-size:.82rem;padding-top:.6rem}
}

/* ---------- One part (teil-*.html) ---------- */
.crumb{margin:1.6rem 0 0;font-size:.95rem}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.teil-hero{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:3rem;align-items:center;padding:1.6rem 0 3rem}
.teil-portrait{margin:0;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 44px rgba(0,0,0,.4);background:#150f11}
.teil-portrait img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.teil-head h1{--fs-p:3rem;--fam-p:var(--font-head);--fw-p:600;--c-p:var(--head);--fs-s:1.4rem;--fam-s:var(--font-head);--fw-s:400;--c-s:var(--ink-soft);margin:0 0 1.4rem;gap:.2rem;line-height:1.2;letter-spacing:-.005em}
.teil-tag{--fs-p:1.2rem;--c-p:var(--head);--fs-s:1.05rem;--c-s:var(--ink-soft);--fst-s:italic;gap:.35rem;margin:0}
.teil-tag p{margin:0}
.teil-head .play{margin-top:1.6rem}
.teil-head .play span[aria-hidden]{font-size:.8em;margin-right:.35rem}
.sayings{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.sayings li{--fs-p:1.2rem;--fam-p:var(--font-head);--c-p:var(--head);--fs-s:.98rem;--c-s:var(--ink-soft);--fst-s:italic;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;gap:.35rem}
.sayings q{quotes:"“" "”"}
.sayings q[data-l]{line-height:1.35}
.intent{margin-top:1.2rem;padding:1.5rem 1.8rem;border-radius:var(--radius);background:radial-gradient(120% 140% at 0 0,rgba(245,191,85,.13),rgba(245,191,85,.03) 55%,transparent),var(--card);border:1px solid rgba(245,191,85,.28)}
.intent p{max-width:60ch}
.intent .pair{--fs-p:1.3rem;--fam-p:var(--font-head);--c-p:var(--head);--fs-s:1.05rem;--c-s:var(--ink-soft);--fst-s:italic;gap:.8rem}
.intent p{margin:0;line-height:1.45}
.teil-close{text-align:center}
.teil-close p{margin-inline:auto}
.teil-close .pair{--c-p:var(--ink);--c-s:var(--ink-soft);--fst-s:italic;align-items:center;margin-bottom:1.4rem;gap:.5rem}
.teil-close .pair p{margin:0}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem 0 3rem;border-top:1px solid var(--line)}
.pager a{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);text-decoration:none;color:var(--head);transition:border-color .2s,background .2s;font-family:var(--font-head);font-size:1.1rem}
.pager a:hover{border-color:var(--ochre);background:var(--raised)}
.pager small{font-family:var(--font-body);font-size:.82rem;color:var(--ink-soft);letter-spacing:.04em}
.pager .pair{--fs-p:1.1rem;--fam-p:var(--font-head);--c-p:var(--head);--fs-s:.9rem;--fam-s:var(--font-body);--c-s:var(--ink-soft)}
.pager .pg-next .pair{align-items:flex-end}
.pager .pg-next{text-align:right}
@media (max-width:820px){
  .teil-hero{grid-template-columns:1fr;gap:1.6rem;padding-bottom:2rem}
  .teil-portrait{max-width:420px;margin-inline:auto;width:100%}
  .teil-head{text-align:center}
  .teil-head h1{--fs-p:2.3rem}
  .teil-tag{align-items:center}
  .teil-head p{margin-inline:auto}
  .sayings{grid-template-columns:1fr}
  .intent{padding:1.2rem 1.3rem}
}
@media (max-width:480px){.pager{grid-template-columns:1fr}.pager .pg-next{text-align:left}.pager .pg-next .pair{align-items:flex-start}}

/* Modal */
.part-modal{
  position:fixed;inset:0;background:#000;z-index:100;display:none;
  align-items:center;justify-content:center;
}
.part-modal.open{display:flex}
.part-modal-inner{
  position:relative;width:min(94vw,480px);height:min(92vh,850px);
  border-radius:18px;overflow:hidden;background:#000;
}
.part-modal-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.05);
}
.part-modal-bg.kenburns{animation:kenburns 14s ease-in-out forwards}
@keyframes kenburns{from{transform:scale(1.0)}to{transform:scale(1.16)}}
.part-modal-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 35%,rgba(0,0,0,.75) 100%);
}
.part-modal-caption{
  position:absolute;left:0;right:0;bottom:0;padding:2rem 1.6rem 2.4rem;
  color:#fff;text-align:center;opacity:0;transition:opacity .5s;
}
.part-modal-caption.show{opacity:1}
.part-modal-caption .phase-title{margin:0 0 1.2rem;font-family:var(--font-head,Georgia,serif)}
.part-modal-caption .phase-title{--fs-p:1.5rem;--fw-p:400;--c-p:#fff;--fs-s:1rem;--c-s:rgba(255,255,255,.75);--fam-p:var(--font-head);--fam-s:var(--font-head)}
.part-modal-caption .line{--fs-p:1.05rem;--c-p:#fff;--fs-s:.9rem;--c-s:rgba(255,255,255,.75);--fst-s:italic;--fam-p:var(--font-body);--fam-s:var(--font-body);margin:0 0 .9rem;gap:.15rem;animation:fadein .6s ease}
.part-modal-caption .line.soon{opacity:.7}
.part-modal-caption a.button{margin-top:1rem}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.part-modal-close{
  position:absolute;top:.8rem;right:.8rem;z-index:2;width:2.2rem;height:2.2rem;border-radius:50%;
  background:rgba(255,255,255,.15);color:#fff;border:none;font-size:1.1rem;cursor:pointer;
}
.part-modal-close:hover{background:rgba(255,255,255,.3)}

@media (max-width:600px){
  .part-modal-inner{width:100vw;height:100vh;border-radius:0}
}

/* --- Environment prototype: painting placed in a small animated themed
   scene instead of filling the frame, per Lena's "found in a fitting
   environment, moves a bit" idea. Pure CSS, no extra assets/cost. --- */
.part-modal-env{position:absolute;inset:0;z-index:0;overflow:hidden;background:#111}
.part-modal-bg{z-index:1}
.part-modal-scrim{z-index:2}
.part-modal-caption{z-index:3}
.part-modal-close{z-index:4}

.part-modal-bg.has-env{
  background-size:68% auto;background-repeat:no-repeat;background-position:center 56%;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));
}
.part-modal-bg.kenburns-env{animation:kenburns-env 6s ease-in-out infinite}
@keyframes kenburns-env{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.045) translateY(-10px)}}

/* Saboteur — fire */
.env-fire{background:radial-gradient(ellipse at 50% 100%,#6b220f 0%,#37130a 42%,#170906 75%,#0a0503 100%)}
.env-fire .ember{
  position:absolute;bottom:-10px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#ffdf9a 0%,#ff8a2a 55%,transparent 75%);
  opacity:0;animation:ember-rise 4.2s ease-in infinite;
}
.env-fire .ember.e0{left:8%;animation-delay:.1s}
.env-fire .ember.e1{left:20%;animation-delay:1.3s;width:4px;height:4px}
.env-fire .ember.e2{left:33%;animation-delay:.6s}
.env-fire .ember.e3{left:48%;animation-delay:2.1s;width:5px;height:5px}
.env-fire .ember.e4{left:60%;animation-delay:.9s}
.env-fire .ember.e5{left:72%;animation-delay:1.9s;width:4px;height:4px}
.env-fire .ember.e6{left:84%;animation-delay:.3s}
.env-fire .ember.e7{left:92%;animation-delay:2.6s;width:5px;height:5px}
@keyframes ember-rise{
  0%{transform:translateY(0) scale(1);opacity:0}
  12%{opacity:1}
  75%{opacity:.55}
  100%{transform:translateY(-70vh) scale(.35);opacity:0}
}

/* Overwhelmed — storm / churn */
.env-storm{background:radial-gradient(ellipse at 50% 25%,#3d5064 0%,#1e2a35 42%,#0b1015 82%)}
.env-storm .blob{position:absolute;border-radius:50%;filter:blur(34px);opacity:.5;animation:drift ease-in-out infinite}
.env-storm .blob.b0{width:240px;height:240px;top:-60px;left:-60px;background:#5c7a94;animation-duration:11s}
.env-storm .blob.b1{width:200px;height:200px;bottom:-50px;right:-30px;background:#33445640;background:#37475a;animation-duration:9s;animation-delay:1s}
.env-storm .blob.b2{width:160px;height:160px;top:38%;left:58%;background:#26313d;animation-duration:13s;animation-delay:2s}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-20px)}}

/* --- Homepage: parts on a circle around the intro text --- */
.orbit-hero{--ring:min(650px,calc(100vw - 3rem));display:grid;justify-items:center;padding:3.4rem 0 3.4rem;text-align:center}
.orbit-hero .ring{grid-area:1/1;width:var(--ring);aspect-ratio:1/1;position:relative;container-type:inline-size}
.ring svg.guide{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ring .sun{display:none;position:absolute;left:50%;top:50%;width:34cqw;height:34cqw;translate:-50% -50%}
.ring .sun img{width:100%;height:100%;display:block}

/* the centre: quiet gold light, no second outline */
.ring .self{
  position:absolute;left:50%;top:50%;width:63cqw;height:63cqw;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,rgba(239,166,36,.10),rgba(49,38,42,.55) 60%,rgba(43,33,38,.35));
  border:1px solid rgba(239,166,36,.34);
  box-shadow:inset 0 0 70px rgba(239,166,36,.10),0 0 40px rgba(239,166,36,.10);
  pointer-events:none;
}
.ring .self::after{
  content:"";position:absolute;inset:-34%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(239,166,36,0) 0,rgba(239,166,36,0) 58%,rgba(239,166,36,.30) 63%,rgba(239,166,36,.17) 72%,rgba(239,166,36,.08) 84%,rgba(239,166,36,.025) 94%,rgba(239,166,36,0) 100%);
  animation:radiate 8s ease-in-out infinite;
}
@keyframes radiate{0%,100%{transform:scale(.97);opacity:.75}50%{transform:scale(1.04);opacity:1}}

/* lines from the centre to each part */
.spoke{stroke-opacity:.72;stroke-linecap:round;fill:none;transition:stroke-opacity .3s}
.spoke.on{stroke-opacity:1;stroke-dasharray:1 7;animation:flow 1.1s linear infinite}
.hub{fill-opacity:.85;transition:fill-opacity .3s}
.hub.on{fill-opacity:1}
@keyframes flow{to{stroke-dashoffset:-8}}

/* the portraits */
.orbit{list-style:none;margin:0;padding:0}
.orbit li{position:absolute;left:var(--x);top:var(--y);width:calc(var(--s)*1cqw);transform:translate(-50%,-50%)}
.orbit button{
  position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--card);
  box-shadow:0 0 0 1px var(--line),0 8px 18px rgba(0,0,0,.5);
  transition:transform .3s ease,box-shadow .3s ease;
  animation:bob 8s ease-in-out infinite;animation-delay:var(--d);
}
.orbit img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.orbit button:hover,.orbit button:focus-visible,.orbit button.on{transform:scale(1.16);box-shadow:0 0 0 2.5px var(--ochre),0 12px 26px rgba(0,0,0,.55);animation-play-state:paused;outline:none}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.orbit .nm{
  position:absolute;left:50%;top:calc(100% + .7rem);translate:-50% 0;width:9.5rem;text-align:center;pointer-events:none;
  font-size:.78rem;line-height:1.25;color:var(--ink-soft);
}
.orbit li.up .nm{top:auto;bottom:calc(100% + .75rem)}
.orbit .nm{--fs-p:.92rem;--fam-p:var(--font-head);--fw-p:600;--c-p:var(--head);--fs-s:.78rem;--c-s:var(--ink-soft);--fam-s:var(--font-body);align-items:center}

/* the text in the centre */
.orbit-hero .copy{grid-area:1/1;place-self:center;width:min(300px,46%);text-align:center;z-index:1}
.orbit-hero .copy h1{font-size:1.5rem;line-height:1.18;margin:0 auto .55rem;max-width:9.5em;text-wrap:balance}
.orbit-hero .copy p{margin:0 0 .9rem;color:var(--ink-soft);font-size:.95rem;line-height:1.55;max-width:none}
.orbit-hero .btns{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.orbit-hero .btns a.button{padding:.5rem 1.15rem;font-size:.88rem}

/* the hint under the circle */
.orbit-cap{max-width:560px;margin:.8rem auto 0;text-align:center;padding:0 1rem;color:var(--ink-soft);font-size:.92rem}
.orbit-cap{--fs-p:.92rem;--c-p:var(--ink-soft);--fs-s:.84rem;--c-s:var(--ink-soft);align-items:center}
.orbit-cap p{max-width:none;margin:0}
.orbit-cap p[data-l]:not([data-l=""]){opacity:1}

/* explanation card next to the portrait */
.orbit-hero{position:relative}
.part-pop{
  position:absolute;z-index:6;width:min(292px,calc(100vw - 24px));text-align:left;
  background:var(--card);border:1px solid rgba(239,166,36,.42);border-radius:16px;padding:.95rem 1.05rem 1rem;
  box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 36px rgba(239,166,36,.13);
  animation:popin .2s ease;
}
.part-pop[hidden]{display:none}
@keyframes popin{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
.part-pop::before{content:"";position:absolute;width:12px;height:12px;background:var(--card);border:1px solid rgba(239,166,36,.42);transform:rotate(45deg)}
.part-pop.r::before{left:-7px;top:var(--ay);margin-top:-6px;border-right:0;border-top:0}
.part-pop.l::before{right:-7px;top:var(--ay);margin-top:-6px;border-left:0;border-bottom:0}
.part-pop.b::before{top:-7px;left:var(--ax);margin-left:-6px;border-right:0;border-bottom:0}
.part-pop.a::before{bottom:-7px;left:var(--ax);margin-left:-6px;border-left:0;border-top:0}
.part-pop h3{--fs-p:1.15rem;--fam-p:var(--font-head);--fw-p:600;--c-p:var(--head);--fs-s:.86rem;--fam-s:var(--font-body);--fw-s:400;--c-s:var(--ink-soft);margin:0;line-height:1.3;gap:.05rem}
.part-pop .tg{--fs-p:.95rem;--c-p:var(--ink);--fs-s:.88rem;--c-s:var(--ink-soft);--fst-s:italic;margin-top:.55rem;gap:.25rem}
.part-pop .tg p{margin:0;max-width:none;line-height:1.5}
.part-pop .more{display:inline-block;text-decoration:none;margin-top:.8rem;background:none;border:1.5px solid var(--line);color:var(--head);border-radius:30px;padding:.35rem .9rem;font:inherit;font-size:.86rem;white-space:nowrap;cursor:pointer}
.part-pop .more:hover{border-color:var(--ochre)}

/* phones: the logo sun sits in the ring, the text moves underneath */
@media (max-width:760px){
  .orbit-hero{display:flex;flex-direction:column;padding:1.4rem 0 2.8rem}
  .orbit-hero .ring{margin:0 auto;width:min(100%,430px)}
  .ring .sun{display:block}
  .orbit .nm{display:none}
  .orbit-hero .copy{order:-1;width:auto;max-width:34rem;margin:0 auto 1.6rem}
  .orbit-hero .copy h1{font-size:2rem}
  .orbit-hero .copy p{font-size:1.02rem}
  .orbit-hero .btns{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .orbit-hero .btns a.button{font-size:.95rem;padding:.6rem 1.25rem}
  .orbit-cap{margin-top:.4rem}
}
@media (prefers-reduced-motion:reduce){.orbit button,.ring .self::after,.spoke.on,.part-pop{animation:none}}
.sayings li:last-child:nth-child(odd){grid-column:1/-1}

/* ---------- Filter by kind (gallery) + kind label ---------- */
.k-m{--k:#82A6E9}.k-f{--k:#E8866C}.k-e{--k:#B2A89C}.k-s{--k:#F5BF55}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 1rem}
.filters button{display:inline-flex;align-items:center;gap:.5rem;background:var(--card);border:1.5px solid var(--line);color:var(--ink);border-radius:24px;padding:.45rem 1.05rem;font:inherit;font-size:.95rem;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.filters button i{width:.62rem;height:.62rem;border-radius:50%;background:var(--k,var(--ink-soft))}
.filters button:hover{border-color:var(--k,var(--ochre));color:var(--head)}
.filters button[aria-pressed="true"]{border-color:var(--k,var(--ochre));background:rgba(255,255,255,.06);color:var(--head)}
.filters button[data-f="all"][aria-pressed="true"]{border-color:var(--ochre)}
.filters small{font-size:.78rem;color:var(--ink-soft)}
.hero-note{font-size:.98rem;color:var(--ink-soft);margin:-.4rem auto 0;max-width:560px}
.gsec{margin:0 0 3.2rem}
.gsec[hidden]{display:none}
.gsec-h{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .3rem;font-size:1.6rem}
.gsec-h i{width:.7rem;height:.7rem;border-radius:50%;background:var(--k);flex:none;transform:translateY(-.12em)}
.gsec-h small{font-family:var(--font-body);font-weight:400;font-size:.9rem;color:var(--ink-soft)}
.gsec-d{color:var(--ink-soft);margin:0 0 1.4rem;max-width:62ch}
.gimg{position:relative}
.soon{position:absolute;left:.7rem;bottom:.7rem;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);background:rgba(20,14,16,.72);border:1px solid var(--line);border-radius:12px;padding:.18rem .6rem}
.teil-portrait{position:relative}
.teil-portrait.ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem 1.2rem 1rem;text-align:center;font-size:.9rem;color:var(--ink-soft);background:linear-gradient(0deg,rgba(20,14,16,.85),transparent)}
.care{margin-top:1.1rem;padding:1.4rem 1.7rem;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ochre)}
.care p{max-width:64ch;margin:0 0 .6rem}
.care .pair{--fs-p:1.08rem;--c-p:var(--head);--fs-s:1rem;--c-s:var(--ink-soft);--fst-s:italic;gap:.6rem;margin-bottom:1rem}
.care .pair p{margin:0}
.care ul{margin:0;padding-left:1.1rem;color:var(--ink)}.care li{margin:.3rem 0}
.kind{display:inline-flex;align-items:center;gap:.4rem;margin:0 0 .35rem;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.kind::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--k)}
.teil-head .kind{margin:0 0 .6rem}
@media (max-width:820px){.teil-head .kind{justify-content:center}}
@media (max-width:560px){.filters button{padding:.4rem .8rem;font-size:.88rem}}

/* ---------- Bilingual pairs: the language you chose comes first, the other one below ----------
   Markup:  <x class="pair"><span data-l="en">…</span><span data-l="de">…</span></x>
   The container sets --fs-p / --c-p / … for the first (chosen) language and --fs-s / --c-s / … for the second. */
.pair{display:flex;flex-direction:column}
[data-l]{--fs:var(--fs-s,1em);--c:var(--c-s,currentcolor);--fam:var(--fam-s,var(--font-body));--fst:var(--fst-s,normal);--fw:var(--fw-s,400);--ord:2}
[data-lang="en"] [data-l="en"],[data-lang="de"] [data-l="de"]{--fs:var(--fs-p,1em);--c:var(--c-p,currentcolor);--fam:var(--fam-p,var(--font-body));--fst:var(--fst-p,normal);--fw:var(--fw-p,400);--ord:1}
[data-l]{font-size:var(--fs);color:var(--c);font-family:var(--fam);font-style:var(--fst);font-weight:var(--fw);order:var(--ord);display:block}
.sec-note{color:var(--ink-soft);font-size:.95rem;margin:-.3rem 0 .4rem;max-width:64ch}

/* one language at a time: the chosen one only */
[data-lang="de"] [data-l="en"],[data-lang="en"] [data-l="de"]{display:none}

/* Home: categories as a bento grid, each with a faint painting and an accent colour taken from it */
.card-grid.cats{display:grid;grid-template-columns:repeat(12,1fr);gap:1.1rem}
.card.cat{position:relative;overflow:hidden;grid-column:span 4;padding:0;border-radius:16px;border-top:2px solid var(--acc);isolation:isolate;min-height:15rem}
.card.cat.s7{grid-column:span 7}.card.cat.s5{grid-column:span 5}
.card.cat .bg{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;opacity:.42;z-index:-1;
  -webkit-mask-image:linear-gradient(to left,#000 5%,transparent 92%);mask-image:linear-gradient(to left,#000 5%,transparent 92%);transition:opacity .35s,transform .6s}
.card.cat:hover .bg{opacity:.6;transform:scale(1.03)}
.card.cat::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 60%)}
.card.cat .in{padding:1.3rem 1.4rem 1.2rem;max-width:78%;display:flex;flex-direction:column;height:100%;box-sizing:border-box}
.card.cat.s4 .in{max-width:100%}
.card.cat h3{margin:0 0 .25rem;font-size:1.28rem;line-height:1.2}
.card.cat .ex{margin:.2rem 0 .2rem;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.card.cat .tx{margin:0;line-height:1.5}
.card.cat .plist{margin:auto 0 0;padding-top:1rem;display:flex;flex-wrap:wrap;gap:.4rem .45rem}
.card.cat .plist a{font-size:.8rem;padding:.22rem .65rem;border-radius:20px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);color:var(--ink);text-decoration:none;background:rgba(20,14,16,.35);white-space:nowrap;transition:background .2s,border-color .2s}
.card.cat .plist a:hover{background:color-mix(in srgb,var(--acc) 30%,transparent);border-color:var(--acc)}
@media (max-width:900px){.card-grid.cats{grid-template-columns:repeat(2,1fr)}.card.cat,.card.cat.s7,.card.cat.s5,.card.cat.s4{grid-column:span 1}.card.cat .in{max-width:100%}.card.cat .bg{width:100%;opacity:.22}}
@media (max-width:560px){.card-grid.cats{grid-template-columns:1fr}}
.card.cat .ex{margin:.1rem 0 .25rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.small-note{margin:1rem 0 0;font-size:.82rem;color:var(--ink-soft);max-width:none}
.card.cat.s4 .bg{opacity:.32}
.card.cat.s4:hover .bg{opacity:.5}
.card.cat .tx{text-shadow:0 1px 8px rgba(20,14,16,.55)}
.card.cat .tx{font-style:italic;border-left:2px solid var(--acc);padding-left:.8rem;margin-top:.5rem}
.card.cat .tx{border-left:0;padding-left:0}
.card.cat .tx .eg{font-style:normal;font-weight:600;font-size:.85em;color:var(--acc);margin-right:.15em}
/* Notice band: full width, no card look */
.notice{display:flex;gap:1.1rem;align-items:flex-start;margin:2rem 0 0;padding:1.3rem 1.2rem;border-top:1px solid color-mix(in srgb,var(--ochre) 55%,transparent);border-bottom:1px solid color-mix(in srgb,var(--ochre) 55%,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--ochre) 10%,transparent),transparent 75%)}
.notice .ico{flex:none;width:2.2rem;height:2.2rem;border-radius:50%;border:1.5px solid var(--ochre);color:var(--ochre);display:grid;place-items:center;font:italic 700 1.15rem Georgia,serif;margin-top:.15rem}
.notice h3{margin:0 0 .35rem;font-size:1.05rem;color:var(--head)}
.notice p{margin:0;max-width:52rem;color:var(--ink);line-height:1.6}
.notice .tel{color:var(--head);font-weight:700;white-space:nowrap;padding:0 .15em;border-bottom:2px solid var(--ochre)}
.small-note{text-align:left}
@media (max-width:560px){.notice{flex-direction:column;gap:.6rem;padding:1.1rem .2rem}}
.card.cat .bg.traegt{object-position:50% 12%;opacity:.8;width:70%}
.card.cat .bg.suffocated{opacity:.75;filter:brightness(1.8) contrast(1.05)}
.card.cat:hover .bg.suffocated{opacity:.9}
.card.cat:hover .bg.traegt{opacity:.95}
/* Home: about + method + qualification in one band */
.about-band{display:grid;grid-template-columns:auto 1fr;gap:2.2rem;align-items:center}
.about-band .ab-photo{width:210px;height:262px;object-fit:cover;object-position:50% 20%;border-radius:18px;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.about-band h2{margin:0 0 .7rem}
.about-band p{max-width:44rem}
.about-band .ab-links{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1rem}
@media (max-width:680px){.about-band{grid-template-columns:1fr;text-align:left;gap:1.2rem}.about-band .ab-photo{width:150px;height:188px}}
.about-band .ab-text p a{color:var(--sienna);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.about-band .ab-text p a:hover{text-decoration-thickness:2px}


/* intro flows into the category grid: no divider, question + text side by side, category heading becomes a quiet label */
.intro-q{padding:3rem 0 1.4rem;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:1rem 3rem;align-items:start}
.intro-q h2{margin:0;font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.22;text-wrap:balance;padding-left:1.1rem;border-left:3px solid var(--ochre)}
.intro-q .lead{margin:0;max-width:none;font-size:1.06rem;line-height:1.75;color:var(--ink)}
.intro-q + .section{border-top:none;padding-top:1rem}
.intro-q + .section > h2{display:flex;align-items:center;gap:1rem;font-family:inherit;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 1.2rem}
.intro-q + .section > h2::after{content:"";flex:1;height:1px;background:var(--line)}
@media (max-width:820px){.intro-q{grid-template-columns:1fr;gap:1rem;padding-top:2.2rem}}
.intro-q h2 small{display:block;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem;font-family:inherit}
.intro-q h2{font-style:italic}
.intro-q h2 small{font-style:normal}