@font-face{font-family:"Artico";src:url(/wellbeing/fonts/Artico-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Artico";src:url(/wellbeing/fonts/Artico-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Artico";src:url(/wellbeing/fonts/Artico-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Canela";src:url(/wellbeing/fonts/Canela-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Canela";src:url(/wellbeing/fonts/Canela-LightItalic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}

/* ── Slots (menu.md). Studio Atha Edition values; a Branded Edition swaps values, never layout. ── */
:root{
  --ground:#FCFBF3; --ground-2:#F5F3E9; --text:#1A1B12; --meta:#64635D;
  --dark:#071C1B; --on-dark:#FCFBF3;
  --line:rgba(7,28,27,.10);
  --on-dark-body:#DCD7C9; --on-dark-meta:#B0AA99; --card-on-dark:rgba(250,248,238,.05); --line-dark:rgba(250,248,238,.14);
  /* Die Akzentfarbe steht NICHT hier. Sie kommt aus dem Slot `edition-accent` der Edition und
     wird in applyEdition als --edition-accent-logo gesetzt; die Wortmarke faellt ohne sie auf
     currentColor zurueck. Ein Token mit Wert im :root haette genau diesen Rueckfall verhindert.
     Bis zum 11.10. stand hier `--edition-accent:transparent` und wurde von keiner Zeile
     gelesen — Pruefung 3 hielt den Slot dagegen und ging aus dem falschen Grund gruen. */
  --display:"Canela",Georgia,serif; --sans:"Artico",Helvetica,Arial,sans-serif;
  --m:24px; --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --fast:240ms; color-scheme:light;
}
@media(min-width:960px){:root{--m:clamp(72px,9vw,120px)}}
@media(min-width:1280px){:root{--m:120px}}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%;font-synthesis:none}
body{min-height:100%;background:var(--ground);color:var(--text);font-family:var(--sans);font-weight:400;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.locked,html.locked body,html.hold,html.hold body{overflow:hidden}
html.hold .arrival{height:100vh;height:100svh}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
ul,ol{list-style:none}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* ── Companion type ── */
.t-display{font-family:var(--display);font-weight:300;font-size:40px;line-height:1.05;letter-spacing:-.018em}
.t-display em{font-style:italic;font-weight:300}
.t-title{font-family:var(--display);font-weight:300;font-size:25px;line-height:1.22;letter-spacing:-.008em}
.t-body{font-size:17px;line-height:1.55}
.t-meta{font-size:13px;line-height:1.45;color:var(--meta)}
/* Sätze stehen in Ink. Grau ist Meta — Dauer, Methode, Anlass, Zuordnung. */
.t-small{font-weight:300;font-size:16px;line-height:1.55;color:var(--text)}
.t-label{font-weight:400;font-size:12px;line-height:1.3;letter-spacing:.04em;text-transform:uppercase}
.dim{color:var(--meta)}
.room .t-small,.closing .t-small,.s-next .t-small{font-weight:400}
@media(min-width:960px){.t-display{font-size:54px;line-height:1.04}.t-title{font-size:30px;line-height:1.2}.t-small{font-size:17px}}

/* ── Glass: the one soft surface. Counter-colour of its surface. ── */
/* Versalien sitzen in der Zeilenbox optisch zu hoch: 1 px oben zieht die Tinte auf die Mitte. */
.glass{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:1px 16px 0;border-radius:999px;-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);transition:background var(--fast),opacity var(--fast)}
.glass.on-photo{background:var(--glass-photo,rgba(7,28,27,.34));color:var(--on-dark)}
.glass.on-dark{background:var(--card-on-dark,rgba(250,248,238,.13));color:var(--on-dark)}
.glass.on-ground{background:rgba(7,28,27,.08);color:var(--text)}
.glass.adapt{background:var(--card-on-dark,rgba(250,248,238,.13));color:var(--on-dark);-webkit-backdrop-filter:blur(18px) brightness(.72);backdrop-filter:blur(18px) brightness(.72)}
.glass.play{width:68px;height:68px;padding:0}
.glass.play svg{width:16px;height:16px;margin-left:3px;fill:currentColor}
.pill-play svg{width:7px;height:8px;margin-right:9px;fill:currentColor;flex:none}
.surface.play{position:absolute;inset:0;z-index:2;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hit{position:relative}.hit::before{content:"";position:absolute;inset:-4px}   /* 44 px hit area on a 36 px pill */

/* ── Schlussseite ── Zustand des Pfades. Im Betrieb liefert der Server sie statt des Menus. */
.ended-page{position:fixed;inset:0;z-index:99;background:var(--dark);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--m) var(--m) calc(40px + var(--sab))}
.ended-page .t-title{max-width:16em}
.ended-page .credit{margin-top:56px;color:var(--on-dark-meta);font-size:12px;line-height:1.4}
.ended-page .credit a{color:inherit}
html.closed body>*:not(.ended-page){display:none}
/* ── Grain: closing field only ── */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* ══ ARRIVAL: image with strip ══ */
.arrival{position:relative;height:92vh;height:92svh;background:var(--dark);display:grid;grid-template-rows:auto 1fr}
.arrival .frame{position:relative;overflow:hidden}
.arrival .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--open-fy,35%);transition:opacity .7s ease}
@media(min-width:960px){.arrival .frame img{object-position:var(--open-fx,50%) 50%}}
.arrival .frame img[data-still]{opacity:0}
.arrival .frame img.on{opacity:1}
.strip{height:calc(44px + var(--sat));padding:var(--sat) var(--m) 0;background:var(--ground-2);color:var(--text);display:flex;align-items:center;justify-content:space-between}
.strip{--mark-h:18px}
.strip .mark{letter-spacing:.2em}
@media(min-width:960px){.strip{--mark-h:20px}}
.strip .lang{height:44px;padding:0;color:var(--meta)}
.strip .lang:hover{color:var(--text)}

/* ══ THE CARD ══ */
.welcome{padding:40px var(--m) 0}
/* 17em statt 16 (22.10.): Velas Welcome laeuft jetzt an Satzgrenzen statt mitten im
   Satz, und der erste Satz brauchte 492 px — bei 16em (480 px) blieb „you." allein
   stehen. Die anderen Fassungen setzen ihre Zeilen von Hand und fliessen nicht nach. */
.welcome .t-title{max-width:17em}
.welcome .sender{margin-top:18px;color:var(--meta);font-size:16px;font-weight:300}
.welcome .sender:empty{display:none}
.choice{padding:96px var(--m) 0}
.list{margin-top:40px;border-bottom:1px solid var(--line)}
/* Die Zeile unter dem Namen ist eine Aussage. */
.row .t-small{color:var(--text)}
.head p{color:var(--text)}
.people p{color:var(--text)}
html.demo .row{cursor:default}
.row{display:grid;gap:7px;width:100%;padding:22px 0 21px;border-top:1px solid var(--line);transition:opacity var(--fast)}
.row .line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t-meta{margin-top:9px;font-weight:300}
/* Die Zeile unter dem Namen ist Light: in Regular holt sie den Serifennamen ein. */
.row .line{font-weight:300}
.practice{padding:200px var(--m) 0}
.practice .t-label{display:block;margin-bottom:24px}
.practice .coda{max-width:26em}
.practice .t-display{max-width:12em}
.practice .coda{margin-top:24px;max-width:30em}

.resets{padding:200px 0 0}
.head{padding:0 var(--m);display:grid;gap:26px}
.head p{max-width:30em}
.doors{margin-top:40px;display:grid;gap:10px}
.door{position:relative;height:172px;overflow:hidden;display:block;width:100%}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--fy,50%);transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
/* Der Verlauf traegt den Tuernamen auf hellen Bildern — ohne ihn verschwinden Sleep und
   Table, am Desktop auch Mind. Er gehoert aber auf das Bild, nicht auf die leere Flaeche:
   dort schuetzt er nichts und las sich als Band quer durch das Feld. Deshalb liegt er still,
   bis das Bild da ist; die Klasse setzt das Skript beim `load` des Bildes.
   Das ist kein Rueckfall in „Bild braucht Skript": sichtbar ist das Bild von sich aus,
   am Skript haengt nur der Verlauf darueber. */
.door::after{content:"";position:absolute;inset:45% 0 0;
  background:linear-gradient(transparent,rgba(7,20,19,.62));
  opacity:0;transition:opacity .35s ease}
.door.bild::after{opacity:1}
.door span{position:absolute;left:var(--m);bottom:18px;color:var(--on-dark);z-index:1}

.teachers{padding:120px var(--m) 120px}
.teachers .head{padding:0}
.people{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:56px 16px}
/* Das Feld liegt auf der Huelle, nicht auf dem Bild: der Graufilter wuerde es sonst
   mitentfaerben, und ein Feld am ganzen <li> zoege die Namen mit ins Dunkel. */
.people .pf{display:block;width:100%;aspect-ratio:3/4;overflow:hidden;margin-bottom:14px}
/* Kein Filter mehr. Bis zum 12.10. lagen hier Farbdateien, und `grayscale(1)
   contrast(1.22) brightness(.93)` machte daraus das Schwarzweiss der Flaeche — haerter und
   dunkler als Judiths eigener Grad, und das fiel nie auf, weil niemand die Datei darunter
   sah. Jetzt tragen die Dateien den Grad: aus Judiths Paaren derselben Aufnahme (Farbe und
   ihr S/W) wurde je Portrait die Kanalgewichtung gemessen und auf den 1500x2000-Master
   angewandt. Schnitt und Aufloesung bleiben damit, wie sie waren. Siehe AENDERUNGEN 6a7. */
.people img{width:100%;height:100%;object-fit:cover}
.people .t-small{font-size:16px}
.people .name{font-size:15px;line-height:1.4}
.people .t-small{margin-top:2px}
.people .t-label{margin-top:10px;color:var(--meta)}

.closing{background:var(--dark);color:var(--on-dark);padding:120px var(--m) calc(40px + var(--sab))}
.closing .t-title{max-width:17em}
.closing .return{margin-top:40px}
.closing .credit{margin-top:120px;color:var(--on-dark-meta);font-size:12px;font-weight:400;line-height:1.4}
/* 44 px und ein leiseres Grau, nicht aus Geschmack: mit 12 px Abstand und demselben Wert
   lesen sich Credit und Haftungszeile als ein Block Kleingedrucktes, und die Signatur ist
   dann die obere Zeile davon. Siehe KORREKTUR_1, Abschnitt 4. */
.closing .legal .pp{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.08em;white-space:nowrap}
.closing .legal .pp:hover{color:var(--on-dark-meta)}
.closing .legal{margin-top:44px;max-width:34em;
  color:color-mix(in srgb,var(--on-dark-meta) 62%,var(--dark));
  font-size:12px;font-weight:400;line-height:1.5}
.closing .t-title{color:var(--on-dark)}

@media(min-width:960px){
  .card{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr}
  .arrival{display:contents}
  .arrival .strip{grid-column:1 / span 2;grid-row:1}
  .arrival .frame{grid-column:2;grid-row:2;position:sticky;top:0;height:100vh;align-self:start}
  .card>.col{grid-column:1;grid-row:2;display:grid;grid-template-rows:auto auto;align-content:start}
  .choice{padding-bottom:40px}
  .practice{padding:260px var(--m) 0}
  .practice .t-display{max-width:12em}
  .welcome{padding:112px 96px 0 var(--m)}
  .choice{padding:96px 96px 0 var(--m)}
  .list{max-width:480px;margin-top:64px}
  .list:hover .row:not(:hover),.list:focus-within .row:not(:focus-visible):not(:hover){opacity:.36}
  .row{padding:26px 0 25px}
  .resets{padding-top:260px}
  .doors{grid-template-columns:repeat(5,1fr);margin-top:64px;gap:12px}
  .door img{object-position:var(--fx,50%) 50%}
  .door{height:min(74vh,640px)}
  .door:hover img{transform:scale(1.03)}
  .door span{left:32px;bottom:28px}
  .teachers{padding-top:260px;padding-bottom:160px}
  .people{grid-template-columns:repeat(4,1fr);gap:24px;margin-top:80px}
  .closing{padding-top:220px}
}

/* ══ THE ROOM — the light goes out ══ */
.room{position:fixed;inset:0;z-index:30;background:var(--dark);color:var(--on-dark);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .75s ease,visibility 0s .75s}
.room.open{opacity:1;visibility:visible;transition:opacity .75s ease}
.room-in{opacity:0;transition:opacity .5s ease}
.room.open .room-in{opacity:1;transition:opacity 1.1s ease .55s}
.room.swap .room-in{opacity:0;transition:opacity .4s ease}
.bar{position:sticky;top:0;height:0;z-index:5}
.bar .glass{position:absolute;left:var(--m);top:calc(16px + var(--sat))}
/* Inhalt scrollt darunter durch: auf der hellen Fläche deckend */
.feed .bar .glass{background:var(--ground-2);box-shadow:inset 0 0 0 1px rgba(7,28,27,.28);-webkit-backdrop-filter:none;backdrop-filter:none}
@media(min-width:960px){.bar .glass{top:32px}}

.s-video{position:relative;height:100vh;height:100svh;overflow:hidden}
.s-video>picture,.s-video>picture>img{display:block;width:100%;height:100%}
.s-video>picture>img{object-fit:cover}
.s-video::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(7,20,19,.55));transition:opacity .3s ease}
.s-video picture img{object-position:var(--fp)}
@media(orientation:landscape){.s-video picture img,.s-next img{object-position:var(--fpl)}}
.s-video .ident{position:absolute;left:var(--m);bottom:calc(32px + var(--sab));z-index:2;display:grid;gap:12px;justify-items:start;transition:opacity .3s ease}
.s-video .glass.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}
/* Der Player sitzt mittig in der Fläche; der Hinweis steht direkt darüber. */
.s-video .stage{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s ease .6s}
/* pointer-events zurueckgeben, sonst nimmt die Flaeche darunter jeden Klick entgegen und
   der Player laesst sich nicht bedienen — kein Pause, kein Vollbild, kein Ton. Am 09.10. live
   aufgefallen; die Regel darueber setzt none fuer den Zustand, in dem der Slot leer ist. */
.s-video.playing .stage{opacity:1;pointer-events:auto}
.s-video .player-slot{aspect-ratio:16/9;background:#000;margin:0 auto;
  width:min(100%, calc((100svh - 190px) * 16 / 9));
  max-height:calc(100svh - 190px)}
/* Der Slot bestimmt die Groesse, nicht der Iframe. Ohne diese Regel nimmt der
   Vimeo-Iframe seine eigene Groesse und schwimmt klein in einer schwarzen Flaeche. */
.player-slot iframe,.intro-slot iframe,
.player-slot video,.intro-slot video{
  display:block;width:100%;height:100%;border:0}
/* C2 · Vollbild-Hinweis, nur am Handy: dort liegt das Videoband schmal in viel Dunkel. */
.fs-hint{padding:0 var(--m) 14px;color:var(--on-dark-meta)}
@media(min-width:700px){.fs-hint{display:none}}
.s-video .note{position:absolute;left:var(--m);bottom:calc(32px + var(--sab));z-index:2;opacity:0;transition:opacity var(--fast);color:var(--on-dark-meta)}
.s-video.playing>.ident,.s-video.playing>.play,.s-video.playing::after,.s-video.ended>.ident,.s-video.ended>.play,.s-video.ended::after{opacity:0;pointer-events:none}
.s-video.playing .note{opacity:1}
.s-video>picture{transition:opacity .4s ease .2s}
.s-video.playing>picture,.s-video.ended>picture{opacity:0}
.s-video.playing::after{opacity:0}
.s-video .outro{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;pointer-events:none;transition:opacity 1.2s ease .9s}
.s-video.ended .outro{opacity:1;pointer-events:auto}
.s-video .thanks{padding:0 var(--m);margin-bottom:auto;margin-top:38vh;color:var(--on-dark-body);max-width:calc(16em + 2*var(--m))}
.s-back{position:relative;display:block;width:100%;height:46vh;overflow:hidden;background:none;border:0;padding:0;cursor:pointer}
.s-back .imgs,.s-back img{position:absolute;inset:0;width:100%;height:100%}
.s-back img{object-fit:cover;transition:opacity 1.6s ease}
.s-back .ident{position:absolute;left:var(--m);bottom:calc(28px + var(--sab));display:grid;gap:6px;justify-items:start;text-align:left;color:var(--on-dark)}

.s-text{display:grid;gap:16px;padding:120px var(--m) 0}
.s-text .t-label{color:var(--on-dark-meta)}
.s-text .t-title{max-width:19em;color:var(--on-dark-body)}
.s-text .with{color:var(--on-dark-meta)}
.s-intro{display:grid;gap:32px}
.spec dd a{color:var(--on-dark-body);text-underline-offset:4px;text-decoration-thickness:1px}

/* Dichte B (22.10.): Zeile 51 -> 42 px, Gruppenabstand 48 -> 30. Drei Stichpunkte
   lesen sich sonst als drei Einzelaussagen statt als ein Block. Enger kippt es in Tabelle. */
.s-spec{padding:80px var(--m) 120px;display:grid;gap:30px}
.spec{display:grid;grid-template-columns:112px 1fr}
.spec dt{grid-row:1;padding-top:10px;color:var(--on-dark-meta);border-top:1px solid var(--line-dark)}
.spec dd{grid-column:2;padding:8px 0 9px;font-size:16px;border-top:1px solid var(--line-dark);color:var(--on-dark-body)}

/* Die Pill sitzt in der Wertespalte, damit man sieht, wozu sie gehört */
.sound-block{display:grid;gap:18px}
.sound-block .sp{margin-left:112px;justify-self:start;background:var(--card-on-dark);color:var(--on-dark-body);text-decoration:none}

.s-intro{padding:0 var(--m) 120px}
/* Porträt und Player teilen sich denselben Platz: das Porträt ist 3:4, der Player 16:9.
   Beim Start verschwindet das Porträt und der Player nimmt die Breite ein. */
/* Ein Format fuer Standbild und Player, damit beim Start weder etwas springt noch Dunkel
   um den Player stehen bleibt. Das Standbild ist deshalb 16:9 geschnitten, nicht das
   Hochformat der hellen Seite — die Hauptaussage hier ist „introduction", und ein
   Videoposter sieht aus wie ein Video.
   Am 12.10. stand hier erst 3:4 fuer beides: dann sass der Player als schmaler Streifen in
   132 px Dunkel oben und unten, und der Name schwamm 140 px darunter. Davor ging der Rahmen
   beim Start von 3:4 auf 16:9 — kein Dunkel, dafuer rutschte der ganze Abschnitt hoch.
   Beides war dieselbe Frage: ein Rahmen kann nicht zwei Formate halten.
   Deep Rest hat kein Intro und behaelt sein Hochformat — dort ist das Portrait das Bild
   und nicht das Poster eines Films. */
.intro-wrap{position:relative;max-width:560px;aspect-ratio:3/4}
.intro-wrap.vid{aspect-ratio:16/9}
.intro-fig{position:absolute;inset:0;overflow:hidden;transition:opacity .4s ease .2s}
/* Keine Hoehenrechnung hier. Bis zum 22.10. stand die Breite auf
   `min(100%, (100svh - 220px) * 16/9)` — eine Breite aus der Fensterhoehe. Im Session-Raum
   ist das richtig, dort fuellt der Player die dunkle Buehne; hier ist der Rahmen schon 16:9
   und begrenzt, die Rechnung also ueberfluessig. Sie schlug zu, sobald `svh` kleiner ausfiel
   als das echte Fenster — unter der Interimsadresse schrumpfte das Intro in eine schmale
   Spalte. Der Rahmen gibt das Mass, nichts sonst. */
.intro-slot{position:absolute;inset:0;background:#000;display:none}
.intro-wrap.playing .intro-fig{opacity:0;pointer-events:none}
.intro-wrap.playing .intro-slot{display:block;animation:fadein .4s ease .6s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
/* Kein Filter: das Standbild steht in der Farbe des Films, sonst startet ein graues
   Bild in Farbe — derselbe Sprung in einer anderen Waehrung. Die Graustufen auf der hellen
   Seite bleiben, das ist eine andere Flaeche und eine andere Aufgabe. */
.intro-fig img{width:100%;height:100%;object-fit:cover}
.intro-fig{margin-bottom:0}
.intro-fig .glass.pill{position:absolute;left:16px;bottom:16px}
.s-intro{gap:8px}
/* Der Teachername stand bis zum 12.10. hier unter dem Rahmen und erschien erst beim Start.
   Er steht jetzt oben unter dem Beschreibungssatz: ein Name, der in zwei Zustaenden zwei
   Schriften und zwei Positionen hat, ist schlimmer als keiner. Regular, nicht Light —
   helle Schrift auf dunklem Grund wirkt durch die Ueberstrahlung ohnehin duenner. */
.s-text .with{margin-top:18px;font-weight:400}
.intro-fig .glass.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

.s-next{position:relative;display:block;width:100%;height:64vh;height:64svh;overflow:hidden}
.s-next picture{display:block;width:100%;height:100%}
.s-next img{width:100%;height:100%;object-fit:cover;object-position:var(--fp);filter:brightness(.78);transition:filter var(--fast),transform 1.2s cubic-bezier(.2,.6,.2,1)}
.s-next:hover img{filter:brightness(.9);transform:scale(1.02)}
.s-next .ident{position:absolute;left:var(--m);bottom:calc(32px + var(--sab));display:grid;gap:10px;color:var(--on-dark)}
.s-next .ident .t-label{color:var(--on-dark-meta)}

@media(min-width:700px) and (max-width:1099px){
  .s-text,.s-spec,.s-intro{max-width:calc(var(--m) + 34em)}
  .intro-wrap{max-width:420px}
}
@media(min-width:1100px){
  .room-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,520px);column-gap:clamp(48px,6vw,96px);align-items:start}
  .s-video,.s-next{grid-column:1 / span 2}
  .s-text{grid-column:1;padding:160px 0 0 var(--m);max-width:calc(var(--m) + 30em)}
  .s-spec{grid-column:1;grid-template-columns:1fr;gap:36px;padding:96px 0 200px var(--m);max-width:calc(var(--m) + 480px)}
  .s-intro{grid-column:2;grid-row:2 / span 2;padding:160px var(--m) 200px 0}
  .intro-wrap{width:100%;max-width:520px}
  .spec{grid-template-columns:140px 1fr}
  .sound-block .sp{margin-left:140px}
}

/* ══ THE FEED — a card laid on top ══ */
.feed{position:fixed;inset:0;z-index:20;background:var(--ground);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;transform:translateY(100%);transition:transform .65s cubic-bezier(.22,.7,.12,1),visibility 0s .65s}
.feed.open{visibility:visible;transform:none;transition:transform .65s cubic-bezier(.22,.7,.12,1)}
.f-intro{padding:calc(112px + var(--sat)) var(--m) 0;display:grid;gap:16px}
.f-intro p{max-width:22em}
@media(min-width:960px){.f-intro p{font-size:18px;line-height:1.55}}
/* ── Die Tür: eine Spalte, Rhythmus aus den Bildern ──────────────────────────
   Eine Lesespalte, ein Maß, keine Linien. Ein Stück wird als Stück erkannt, weil
   Abstand es zusammenhält — nicht weil ein Strich es abgrenzt. Der Rhythmus kommt
   aus Seitenverhältnis und Breite der Bilder, die nach Position wechseln. Damit
   trägt die Fläche drei, vier oder fünf Stücke und beliebige Bilder eines Hauses. */
.grid{padding:72px var(--m) 0}
.item{margin-bottom:112px}
.item:last-child{margin-bottom:0}
.item figure{margin:0 0 48px;overflow:hidden}
/* ── Bilder kommen einzeln ueber die Leitung ──────────────────────────────────
   Eine Bildflaeche, die noch leer ist, zeigt die Flaeche, auf der sie liegt: auf der
   hellen Seite Bone 2, im dunklen Raum das Gruenschwarz. Eine Regel, kein Effekt.

   Bis zum 09.10. lag hier die Unschaerfe des eigenen Bildes als Data-URL. Sie wirkte
   billig, und zu Recht: der Mittelwert eines Fotos ist eine Farbe, die niemand gewaehlt
   hat, und eine Unschaerfe ist ein Bild, das so tut, als waere es das Bild. Ein Farbfeld
   tut nicht so. Nebenbei faellt 1 KB je Bild weg — und alles, was das Bild erst sichtbar
   machen muesste, kann ausfallen. */
.arrival .frame,.item figure,.door,.people .pf{background:var(--ground-2)}
.s-next,.intro-fig{background:var(--dark)}
.item figure img{width:100%;height:100%;object-fit:cover;display:block}
.item.a0 figure{aspect-ratio:4/5}
.item.a1 figure{aspect-ratio:3/2}
.item.a2 figure{aspect-ratio:4/5;width:72%}
.item.a3 figure{aspect-ratio:4/5;width:88%}
.item .txt{display:grid;gap:0}
.item .t-title{margin-top:0}
.item .ctx,.item .do{font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;max-width:26em}
.item .ctx{color:var(--meta);margin-top:12px}
.item .do{color:var(--text);font-weight:400;margin-top:12px}
.f-end{padding:96px 0 0}
.f-end>.t-label{padding:0 var(--m) 20px;display:block}
@media(min-width:700px){
  .f-intro,.grid{max-width:calc(620px + 2*var(--m));margin-inline:auto}
}
@media(min-width:960px){
  .f-intro{padding-top:136px}
  .f-intro p{max-width:26em}
  .f-end{padding-top:160px}
}
@media(min-width:900px){
  .grid{padding-top:128px}
  .item{margin-bottom:144px}
  .item .t-title{font-size:34px;line-height:1.15}
  .item .ctx,.item .do{max-width:26em}
  .f-intro p{max-width:26em}
  /* Das quere Bild ist der eine Moment, an dem die Seite ihre Breite nutzt.
     Kein Vollbild — ein Überhang, der die Spalte nicht verlässt. */

}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important}}
/* The explicit muted-playback fallback from BUILD_BRIEF, point 15. */
.player-slot{position:relative}
.sound-toggle{position:absolute;right:16px;bottom:16px;z-index:2}
.sound-toggle[hidden]{display:none}