/* pascalbehring.com — Stylesheet
   Herkunft: Prototyp v1, ergänzt um die Muss-Punkte aus Konzept v2.
   Condensed = Bedienelemente, Listen, Labels. Junicode breit = Name und About-Text. */

/* ---------- Fonts ---------- */
@font-face { font-family: "Junicode Cond"; src: url("/fonts/Junicode-RegularCondensed.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Junicode Cond"; src: url("/fonts/Junicode-ItalicCondensed.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Junicode"; src: url("/fonts/Junicode.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }

/* ---------- Tokens ---------- */
:root {
  --page-mg: 16px;
  --row-gap: 40px;
  --grid-pt: 50px;
  --fs: 18px;          /* Junicode Condensed ist schmal, 18 px wirkt wie 16 px einer normalen Serif */
  --fs-about: 26px;
  --ink: #000;
  --muted: rgba(0, 0, 0, .56);
  --muted-blend: rgba(255, 255, 255, .55);
  --bg: #fff;
  --frame: #ededed;
  --about-bg: rgba(255, 255, 255, .8);
  --cover-h: 75vh;
  --nav-h: 52px;
  --nav-text-top: 15px;   /* Oberkante der Nav-Zeile; der Titelstapel im Verzeichnis richtet sich daran aus */
  /* Motion-Tokens (Konzept 3) */
  --t-hover: 150ms;
  --t-short: 200ms;
  --t-fade: 300ms;
  --t-page: 400ms;
  --t-move: 600ms;
  --t-morph: 800ms;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-fade: cubic-bezier(.455, .03, .515, .955);
}
@media (min-width: 390px) {
  :root {
    --page-mg: calc(16px + (20 - 16) * (100vw - 390px) / (1920 - 390));
    --row-gap: calc(40px + (80 - 40) * (100vw - 390px) / (1920 - 390));
    --grid-pt: calc(50px + (100 - 50) * (100vw - 390px) / (1920 - 390));
  }
}
@media (max-width: 768px) { :root { --fs: 17px; --fs-about: 23px; --cover-h: 60svh; } }
@media (prefers-reduced-motion: reduce) {
  :root { --t-hover: 0ms; --t-short: 0ms; --t-fade: 150ms; --t-page: 150ms; --t-move: 0ms; --t-morph: 0ms; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); scrollbar-gutter: stable; overflow-y: scroll; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Junicode Cond", "Junicode", Georgia, serif;
  font-size: var(--fs);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga";
  -webkit-tap-highlight-color: transparent;
}
body.is-locked { position: fixed; left: 0; right: 0; overflow: hidden; }
p, ol, ul, h1 { margin: 0; padding: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
::selection { background: #000; color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- Preloader (nur Desktop, nur Startseite) ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px);
  transition: opacity var(--t-move) var(--ease-fade);
}
#preloader p { font-family: "Junicode", serif; font-size: var(--fs-about); white-space: nowrap; }
#preloader.done { opacity: 0; pointer-events: none; }
@media (max-width: 768px) { #preloader { display: none; } }

/* ---------- Nav: 16-Spalten-Raster, komplett im Difference-Blend ---------- */
.nav { position: fixed; inset: 0; z-index: 500; pointer-events: none; mix-blend-mode: difference; color: #fff; }
.nav a, .nav button, .nav p { pointer-events: auto; }
.nav .project-meta__client, .nav .project-meta__count, .nav .nav__place { color: var(--muted-blend); }
.nav__top {
  position: absolute; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg);
  padding: max(15px, env(safe-area-inset-top)) var(--page-mg) 15px;
  align-items: start;
}
.nav__left  { grid-column: 1 / 5;  grid-row: 1; overflow: hidden; }
.nav__title { grid-column: 1 / 7;  grid-row: 1; justify-self: end; }
.nav__about { grid-column: 7 / 17; grid-row: 1; justify-self: end; margin-right: calc(100vw / 8 - 3px); }
.nav__right { grid-column: 14 / 17; grid-row: 1; justify-self: end; display: grid; }
.nav__right > * { grid-area: 1 / 1; justify-self: end; }
@media (min-width: 769px) and (max-width: 1024px) {
  .nav__title { grid-column: 1 / 10; margin-right: calc((100vw - var(--page-mg)) / 16); }
  .nav__about { margin-right: calc(100vw / 6 - 2px); }
}
.nav__home { font-family: "Junicode", serif; white-space: nowrap; }
.nav__count { white-space: nowrap; transition: opacity var(--t-hover) var(--ease-fade); }
.nav__count.is-swapping { opacity: 0; }

.btn { margin: -10px; padding: 10px; white-space: nowrap; transition: opacity var(--t-hover) var(--ease-fade); }
@media (hover: hover) and (pointer: fine) { .btn:hover { opacity: .5; } }
.nav__close { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--t-hover) var(--ease-fade), visibility 0s linear var(--t-hover); }
body.about-open .nav__toggle, body.legal-open .nav__toggle, body.zoom-open .nav__toggle, body.toc-open .nav__toggle { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--t-hover) var(--ease-fade), visibility 0s linear var(--t-hover); }
body.about-open .nav__close, body.legal-open .nav__close, body.zoom-open .nav__close, body.toc-open .nav__close { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.nav__toggle.is-swapping { opacity: 0; }
body.about-open #btnAbout { opacity: .5; }
.nav__title, .nav__about, .nav__count, .nav__bottom { transition: opacity var(--t-fade) var(--ease-fade), visibility 0s linear 0s; }
body.zoom-open .nav__title, body.zoom-open .nav__about, body.zoom-open .nav__count, body.zoom-open .nav__bottom { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--t-fade) var(--ease-fade), visibility 0s linear var(--t-fade); }
body.zoom-open .nav__title a, body.zoom-open .nav__about a, body.zoom-open .nav__bottom * { pointer-events: none; }

.nav__bottom {
  position: absolute; left: var(--page-mg); right: var(--page-mg);
  bottom: max(16px, env(safe-area-inset-bottom));
  display: none; justify-content: space-between; align-items: baseline;
}
.nav__place, .nav__current { display: none; }
.nav__current { text-align: left; }

/* ---------- Views ---------- */
.wrapper { min-height: 100vh; position: relative; }
/* Messung einer inaktiven Ansicht: unsichtbar über die Seite gelegt */
.view.is-measuring { display: block; position: absolute; top: 0; left: 0; right: 0; visibility: hidden; pointer-events: none; opacity: 1; }
.view--feed.is-measuring { display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg); padding: 0 var(--page-mg); }
.is-morph-hidden { opacity: 0 !important; transition: none !important; }
img.morph { display: block; }
.view { display: none; opacity: 0; transition: opacity var(--t-fade) var(--ease-fade); }
.view.is-active { display: block; }
.view.is-visible { opacity: 1; }

/* ---------- Index: gleichförmiges Raster ----------
   Jede Kachel hat dasselbe Hochformat (--cell-ratio). Querformate liefert das CDN als
   Ausschnitt um den Hotspot aus dem Studio, im Fullscreen bleibt das ganze Bild.
   Ein Format für alles wirkt ruhiger als gemischte Breiten. */
.view--index { container-type: inline-size; }
.index__grid {
  --cols: 8;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr);
  column-gap: var(--page-mg); row-gap: var(--row-gap);
  padding: calc(var(--grid-pt) + 20px) var(--page-mg) var(--grid-pt);
}
.thumb { display: block; cursor: pointer; }
.thumb__img { display: block; position: relative; width: 100%; aspect-ratio: var(--cell-ratio, 0.75); background: var(--frame); overflow: hidden; }
.thumb__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-short) var(--ease-fade); }
.thumb__img img.is-loaded { opacity: 1; }
/* „Ganz“: Querformat unbeschnitten, so breit wie die Zelle, oben ausgerichtet (wie bei Zan) */
.thumb--full .thumb__img { aspect-ratio: var(--ar, 1.5); }
@media (max-width: 1440px) { .index__grid { --cols: 7; } }
@media (max-width: 1024px) { .index__grid { --cols: 6; } }
@media (max-width: 768px)  { .index__grid { --cols: 3; padding-top: 70px; padding-bottom: calc(120px + env(safe-area-inset-bottom)); } }

/* ---------- Projektansicht: Verzeichnis + Cover ----------
   Cover nach Höhe (75vh) wie Zan, Breite folgt dem Format, mittig im Fenster.
   Das Verzeichnis liegt links in vier Spalten (bei langen Titeln bis 35 % des Fensters, views.js fitToc);
   Querformate werden so weit begrenzt,
   dass sie mittig bleiben und das Verzeichnis nicht berühren. */
/* Verzeichnisbreite: 4 von 16 Spalten. views.js fitToc() setzt --toc-w breiter (bis 35 % des Fensters), wenn der
   längste Eintrag sonst umbrechen würde; die Cover werden automatisch so weit begrenzt, dass sie es nicht berühren. */
:root { --toc-w: calc((100vw - 17 * var(--page-mg)) / 16 * 4 + 3 * var(--page-mg)); }
.view--feed.is-active {
  display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg);
  padding: 0 var(--page-mg);
}
/* Verzeichnis wie bei Zan: die Titel stapeln sich beim Scrollen oben links. Jeder Eintrag ist so hoch
   wie ein Cover samt Abstand, sitzt also auf Höhe seines Covers, und bleibt oben kleben (sticky), sobald
   er die Stapelhöhe seines Index erreicht. Der nächste Titel fährt mit seinem Cover nach oben, bis er
   sich unten an den Stapel setzt. */
.toc { list-style: none; }
/* Der Stapel wird per JavaScript positioniert (views.js updateToc): jeder Eintrag steht auf Höhe seines
   Covers und bleibt oben stehen, sobald er seine Stapelposition erreicht. Fixed statt Sticky, weil Sticky
   von Rasterzelle oder Randbox begrenzt wird und sich am Seitenende zusammenschiebt (Safari). */
.toc:not(.toc--mobile) {
  grid-column: 1 / 5; grid-row: 1; align-self: start;
  --toc-line: 1.45em;
}
.toc:not(.toc--mobile) li {
  position: fixed; top: 0; left: var(--page-mg);
  width: var(--toc-w);
  transform: translate3d(0, -300vh, 0);   /* bis das Skript die Position setzt */
  line-height: var(--toc-line);
  pointer-events: none; z-index: 2;
}
.toc a { pointer-events: auto; display: block; white-space: normal; padding-left: 1.1em; text-indent: -1.1em; color: var(--muted); transition: color var(--t-fade) var(--ease-fade); }
.toc a > span { white-space: normal; }
/* Umbruch nur zwischen Titel und Kunde: Kunde + Zähler bilden eine Einheit, die als Ganzes in die nächste Zeile
   rutscht (hängender Einzug), statt mitten im Kunden zu brechen; der Titel bricht nur, wenn er allein nicht passt.
   Außerhalb des Verzeichnisses ist die Einheit unsichtbar (display: contents), damit die Flex-Abstände in
   Nav-Label und Fullscreen-Label unverändert bleiben. */
.project-meta__rest { display: contents; }
.toc .project-meta__rest:has(.project-meta__client) { display: inline-block; white-space: nowrap; text-indent: 0; }
.toc .project-meta__title { margin-right: .5em; }
.toc .project-meta__client + .project-meta__count { margin-left: .5em; }
.toc .project-meta__count { white-space: nowrap; }
.toc .project-meta__client, .toc .project-meta__count { color: inherit; }
/* Messmodus (views.js fitToc): jeder Eintrag in einer Zeile, so breit wie nötig */
.toc.is-measuring li { width: max-content; }
.toc.is-measuring a, .toc.is-measuring a span { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--ink); } }
.toc li.is-current a { color: var(--ink); }
.toc li.is-current .project-meta__client, .toc li.is-current .project-meta__count { color: var(--muted); }
/* Der Stapel ersetzt den Zähler „1/19“ oben links */
body[data-status="feed"] .nav__count { visibility: hidden; }

/* Unten endet die Seite genau dort, wo das letzte Cover seine normale Position hat (Oberkante unter der Nav):
   Rest = Fenster − Cover − Nav-Abstand − Abstand nach dem letzten Cover (8vh) */
.feed { grid-column: 1 / -1; grid-row: 1; padding-top: calc(var(--grid-pt) + 20px); padding-bottom: max(0px, calc(100vh - var(--cover-h) - var(--grid-pt) - 20px - 8vh)); }
.feed__item {
  display: flex; align-items: center; justify-content: center;
  height: var(--cover-h); margin-bottom: 8vh;
  cursor: pointer; scroll-margin-top: calc(var(--grid-pt) + 20px);
  pointer-events: none;                 /* nur das Bild ist klickbar, nicht der Weißraum daneben */
}
.feed__img {
  /* Höhe 75vh, Breite aus dem Format (--ar). Querformate werden so weit begrenzt, dass sie
     mittig bleiben und das Verzeichnis nicht berühren: Breite ≤ Fenster − 2 × (Verzeichnisbreite + 2 Ränder). */
  --maxw: calc(100vw - 2 * (var(--toc-w) + 2 * var(--page-mg)));
  display: block; position: relative;
  height: min(100%, calc(var(--maxw) / var(--ar, 0.6667)));
  aspect-ratio: var(--ar, 0.6667);
  background: var(--frame); pointer-events: auto;
}
.feed__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-short) var(--ease-fade); }
.feed__img img.is-loaded { opacity: 1; }
.feed__label.project-meta { display: none; }

/* ---------- Projekt-Meta: Titel · Kunde · Anzahl ---------- */
.project-meta { display: inline-flex; gap: .5em; align-items: baseline; white-space: nowrap; }
.project-meta__client { color: var(--muted); font-style: italic; }
.project-meta__count  { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Cursor-Label über Covern ---------- */
.cursor-label {
  position: fixed; top: 0; left: 0; z-index: 600; pointer-events: none;
  white-space: nowrap; color: #fff; mix-blend-mode: difference;
  opacity: 0; transition: opacity var(--t-short) var(--ease-fade);
}
.cursor-label.is-on.has-pos { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-label { display: none; } }

/* ---------- Fullscreen: randlos, Bild auf Viewporthöhe ---------- */
.zoom {
  position: fixed; inset: 0; z-index: 400; background: var(--bg);
  opacity: 0; pointer-events: none; transition: opacity var(--t-fade) var(--ease-fade);
}
body.zoom-open .zoom { opacity: 1; pointer-events: auto; }
.zoom__stage { position: absolute; inset: 0; overflow: hidden; }
.zoom__img {
  position: absolute; inset: 0; margin: auto;
  height: 100svh; width: auto; max-width: 100vw; max-height: 100svh; object-fit: contain;
  opacity: 0; transition: opacity var(--t-page) var(--ease-fade);
}
.zoom__img.is-on { opacity: 1; }
.zoom__label, .zoom__credits {
  position: absolute; left: var(--page-mg); z-index: 2;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}
.zoom__label { top: max(15px, env(safe-area-inset-top)); }
.zoom__label .project-meta__client, .zoom__label .project-meta__count, .zoom__credits { color: var(--muted-blend); }
.zoom__credits { bottom: max(16px, env(safe-area-inset-bottom)); max-width: min(360px, 28vw); display: flex; flex-direction: column; line-height: 1.3; font-size: .92em; }
.zoom__credit { display: block; }
@media (max-width: 768px) { .zoom__credits { max-width: 70vw; font-size: .85em; } }
.zoom__credits:empty { display: none; }
@media (hover: hover) and (pointer: fine) { body.zoom-open .zoom { cursor: none; } }
.zoom__cursor {
  position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none;
  transform: translate(-50%, -50%); mix-blend-mode: difference; display: none;
}
@media (hover: hover) and (pointer: fine) { body.zoom-open .zoom__cursor.has-pos { display: block; } }
.zoom__cursor.is-prev svg { transform: scaleX(-1); }
@media (max-width: 768px) {
  .zoom__label { max-width: calc(100vw - 2 * var(--page-mg) - 60px); overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 15px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 15px), transparent); }
}

/* ---------- Overlays: About, Rechtstexte, Mobil-Verzeichnis ---------- */
.overlay { position: fixed; inset: 0; z-index: 450; opacity: 0; pointer-events: none; transition: opacity var(--t-fade) var(--ease-out); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.overlay.is-open { opacity: 1; pointer-events: auto; }
.about__inner, .legal__inner, .toc--mobile { opacity: 0; transition: opacity var(--t-short) var(--ease-out); }
.overlay.is-open .about__inner, .overlay.is-open .legal__inner, .overlay.is-open .toc--mobile { opacity: 1; transition: opacity var(--t-fade) var(--ease-out) var(--t-hover); }
.overlay__bg { position: fixed; inset: 0; background: var(--about-bg); backdrop-filter: blur(17px); -webkit-backdrop-filter: blur(17px); }
.overlay__inner-anim { transition: opacity var(--t-fade) var(--ease-out) var(--t-hover); }

.about__inner, .legal__inner {
  position: relative;
  padding: calc(var(--nav-h) + 48px) var(--page-mg) 60px;
  min-height: 100vh;
}
.legal__inner { display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg); row-gap: 50px; }
/* About wie bei Zan: linkes Drittel frei (hier das Portrait), Text ab Spalte 6, Kontakt rechts;
   darunter Kunden ab Spalte 6, Presse und Standort rechts; zuletzt Behind the scenes ab Spalte 6 */
/* Ein Raster: Portrait links über zwei Zeilen, rechts davon Text und Kontakt, direkt darunter Kunden,
   Presse und Standort, damit unter dem Text keine große Lücke bleibt */
.about__top { display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg); align-items: start; }
.about__portrait { grid-column: 1 / 5; grid-row: 1 / 3; margin: 0; }
.about__portrait-img { display: block; position: relative; width: 100%; aspect-ratio: var(--ar, 0.75); background: var(--frame); overflow: hidden; }
.about__portrait-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-short) var(--ease-fade); }
.about__portrait-img img.is-loaded { opacity: 1; }
.about__desc { grid-column: 6 / 12; grid-row: 1; font-family: "Junicode", serif; font-size: var(--fs-about); line-height: 1.32; }
.about__desc p + p { margin-top: .8em; }
.about__contact { grid-column: 14 / 17; grid-row: 1; }
.about__clients { grid-column: 6 / 9; grid-row: 2; margin-top: 72px; }
.about__press { grid-column: 9 / 14; grid-row: 2; margin-top: 72px; }
.about__misc { grid-column: 14 / 17; grid-row: 2; margin-top: 72px; }
.about__lbl { color: var(--muted); margin-bottom: 14px; }
.about__lbl--rep { margin-top: 36px; }
.about__list { list-style: none; }
.about__list li { margin-bottom: .3em; white-space: nowrap; break-inside: avoid; }
.about__link { display: block; margin-bottom: .3em; }
@media (hover: hover) and (pointer: fine) { .about__link:hover { text-decoration: underline; } }
.about__link--muted { color: var(--muted); }
.about__dl { margin-top: 24px; }
.about__row { display: flex; gap: 24px; margin-bottom: .3em; }
.about__yr { flex: 0 0 90px; white-space: nowrap; }
.about__legal { display: flex; gap: 24px; margin-top: 36px; }
/* Behind the scenes: ein Bild, Klick blättert (links = zurück, rechts = weiter), Pfeiltasten ebenso */
.about__bts { margin-top: 120px; display: grid; grid-template-columns: repeat(16, 1fr); column-gap: var(--page-mg); }
.about__bts > * { grid-column: 6 / 17; }
.about__bts-count { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: .5em; }
.about__bts-stage { position: relative; height: 70vh; cursor: pointer; }
.about__bts-img { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left top; opacity: 0; transition: opacity var(--t-fade) var(--ease-fade); pointer-events: none; }
.about__bts-img.is-on { opacity: 1; }
@media (max-width: 1024px) {
  .about__portrait { grid-column: 1 / 5; grid-row: 1 / 5; }
  .about__desc { grid-column: 5 / 17; grid-row: 1; }
  .about__contact { grid-column: 5 / 17; grid-row: 2; margin-top: 40px; }
  .about__clients { grid-column: 5 / 9; grid-row: 3; margin-top: 56px; } .about__press { grid-column: 9 / 17; grid-row: 3; margin-top: 56px; } .about__misc { grid-column: 5 / 17; grid-row: 4; margin-top: 40px; }
  .about__bts > * { grid-column: 5 / 17; }
}
@media (max-width: 768px) {
  .about__inner, .legal__inner { padding-top: 70px; }
  .legal__inner { grid-template-columns: 1fr; row-gap: 48px; }
  .about__top { grid-template-columns: 1fr; row-gap: 40px; }
  .about__portrait, .about__desc, .about__contact, .about__clients, .about__press, .about__misc { grid-column: 1; grid-row: auto; margin-top: 0; }
  .about__portrait { max-width: 60%; }
  .about__bts { margin-top: 64px; }
  .about__bts > * { grid-column: 1 / -1; }
  .about__bts-stage { height: 50vh; }
}
.legal__title { font-family: "Junicode", serif; font-size: var(--fs-about); margin-bottom: 32px; }
.legal__lbl { color: var(--muted); margin-top: 28px; margin-bottom: 8px; }
.legal__section p { max-width: 640px; line-height: 1.35; }
.legal__section p + p { margin-top: .6em; }
@media (max-width: 768px) { .legal__section { grid-column: 1; } }

.toc--mobile { grid-column: 1 / -1; position: relative; padding: 70px var(--page-mg) 120px; max-height: none; }
.toc--mobile li { line-height: 1.25; padding: 10px 0; }
.toc--mobile a { color: var(--muted); }

/* ---------- Mobil ---------- */
@media (max-width: 768px) {
  .nav__top { display: flex; justify-content: space-between; align-items: flex-start; }
  .nav__left { display: none; }
  .nav__title { order: 1; }
  .nav__about { order: 2; margin-left: auto; margin-right: 18px; }
  .nav__right { order: 3; }
  .nav__bottom { display: flex; }
  body[data-status="index"] .nav__place { display: block; }
  body[data-status="feed"] .nav__current { display: inline-flex; }
  body.about-open .nav__bottom, body.legal-open .nav__bottom, body.toc-open .nav__bottom { opacity: 0; pointer-events: none; }
  .view--feed.is-active { display: block; }
  .toc:not(.toc--mobile) { display: none; }
  .feed { padding-top: 70px; padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .feed__item { height: auto; margin-bottom: 6vh; }
  .feed__img { height: auto; width: auto; max-width: 100%; aspect-ratio: auto; }
  .feed__img img { position: static; width: auto; height: auto; max-width: 100%; max-height: var(--cover-h); object-fit: contain; }
  .view--feed.is-measuring { display: block; }
}