/* Halle Neun, Demo-Portfolio für KettenKI.
   Ein Stylesheet für beide Seiten, mobile first, ohne Abhängigkeiten ausser
   den zwei Schriften von Google Fonts.
   Schweizer Schreibweise: ss, nie ß. */

:root {
  /* Fast schwarz, damit die Arbeiten die einzigen Farbflächen auf der Seite
     sind. Der Ton ist warm gebrochen, sonst wirkt der Raum wie ein Bildschirm
     und nicht wie eine Halle. */
  --void: #0c0c0d;
  --void-soft: #141416;
  --void-lift: #1b1b1e;
  --chalk: #f2efea;
  --chalk-dim: #a9a49c;
  --chalk-faint: #6f6a63;
  --line: rgba(242, 239, 234, 0.14);
  --line-soft: rgba(242, 239, 234, 0.07);
  --sand: #d3bf9d;

  --display: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  --sans: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --page: clamp(1.25rem, 5vw, 5.5rem);
  --band: clamp(5rem, 12vw, 13rem);
  --gap: clamp(1rem, 2.2vw, 2.25rem);
  --ease: cubic-bezier(0.19, 0.62, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, fieldset {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--void);
  color: var(--chalk);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 1px solid var(--sand);
  outline-offset: 4px;
}

::selection {
  background: var(--sand);
  color: var(--void);
}

.shell {
  width: 100%;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: var(--page);
}

.narrow {
  max-width: 68ch;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Schrift ---------- */

.display {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Werktitel stehen kursiv, so wie es jeder Katalog macht. Sonst nichts:
   Die Überschriften der Seite kommen ohne aus. Beide Schriften haben keinen
   echten Kursivschnitt, der Browser neigt sie also selbst. */
cite {
  font-style: italic;
}

.eyebrow {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--chalk-dim);
}

/* ---------- Kopfzeile ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--void) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.masthead.is-stuck {
  border-bottom-color: var(--line-soft);
  background: color-mix(in srgb, var(--void) 92%, transparent);
}

.masthead__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.wordmark__tag {
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  transform: translateY(-2px);
}

.masthead__nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.masthead__nav a {
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s var(--ease);
}

.masthead__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.masthead__nav a:hover,
.masthead__nav a[aria-current='page'] {
  color: var(--chalk);
}

.masthead__nav a:hover::after,
.masthead__nav a[aria-current='page']::after {
  transform: scaleX(1);
}

/* Auf dem Telefon muss die Zeile aus Wortmarke und drei Links in eine
   Breite von 320 Pixeln passen. Also wird alles eine Spur kleiner. */
@media (max-width: 560px) {
  .masthead__row {
    gap: 0.75rem;
    padding-block: 0.9rem;
  }

  .wordmark {
    font-size: 1.15rem;
    gap: 0.4rem;
  }

  .wordmark__tag {
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    padding: 0.1rem 0.4rem;
  }

  .masthead__nav {
    gap: 0.9rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
  }
}

/* ---------- Auftakt ---------- */

.opener {
  padding-block: clamp(4rem, 13vw, 11rem) clamp(3rem, 8vw, 7rem);
}

/* Was gerade hängt, als Aushang unter dem Auftakt. */
.onview {
  margin-top: clamp(3rem, 8vw, 5.5rem);
  border-top: 1px solid var(--line-soft);
}

.onview > div {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}

.onview dt {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  margin-bottom: 0.25rem;
}

.onview dd {
  font-size: 1rem;
  color: var(--chalk);
}

@media (min-width: 760px) {
  .onview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 var(--gap);
  }

  .onview > div {
    padding-block: 1.1rem 0;
    border-bottom: 0;
  }
}

.opener__title {
  font-size: clamp(3rem, 11.5vw, 10.5rem);
  max-width: 16ch;
}

.opener__foot {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.opener__foot p {
  max-width: 46ch;
}

.scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.scroll-hint::after {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: pull 2.8s var(--ease) infinite;
}

@keyframes pull {
  0%, 100% { transform: scaleX(0.35); opacity: 0.5; }
  50% { transform: scaleX(1); opacity: 1; }
}

/* ---------- Werkraster ---------- */

.works {
  padding-block: clamp(2rem, 5vw, 4rem) var(--band);
}

.works__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line-soft);
}

.works__head h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* minmax(0, 1fr) statt 1fr: Eine 1fr-Spur hat als Minimum den Inhalt ihrer
   Zellen, nicht null, und kann deshalb breiter werden als der Anteil, der ihr
   zusteht. Hier hält das nichts auf, sondern beugt vor: In einer Zelle steht
   ein Bild, und ein Bild mit prozentualer Breite zählt in dieser Rechnung mit
   seiner eigenen Breite von 1376 px. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap) var(--gap);
}

.tile {
  grid-column: span 12;
  display: block;
  align-self: start;
  transition: opacity 0.6s var(--ease);
}

.tile__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--void-soft);
  aspect-ratio: 16 / 9;
}

.tile__media img,
.tile__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter 0.8s var(--ease);
}

.tile__media::after {
  /* Eine Spur Schatten an der Unterkante, damit helle Arbeiten nicht
     aus dem dunklen Raster herausfallen. */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(to top, rgba(12, 12, 13, 0.35), transparent);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.tile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  padding-top: 0.9rem;
}

.tile__no {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--chalk-faint);
}

.tile__title {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.9vw, 1.55rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.tile__line {
  flex-basis: 100%;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--chalk-faint);
}

.tile__film {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
}

.tile__film::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: beat 2.4s ease-in-out infinite;
}

@keyframes beat {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (hover: hover) and (min-width: 700px) {
  /* Wer eine Arbeit anschaut, soll nur diese anschauen. Der Rest tritt
     einen Schritt zurück. */
  .grid:hover .tile {
    opacity: 0.4;
  }

  .grid:hover .tile:hover,
  .grid .tile:focus-visible {
    opacity: 1;
  }

  .tile:hover .tile__media img {
    transform: scale(1.035);
  }

  .tile:hover .tile__media::after {
    opacity: 1;
  }
}

/* ---------- Sobald Platz da ist: das Raster bricht auf ---------- */

@media (min-width: 700px) {
  .tile--full { grid-column: span 12; }
  .tile--wide { grid-column: span 7; }
  .tile--mid { grid-column: span 5; }
  .tile--third { grid-column: span 4; }

  .tile--push {
    margin-top: clamp(2rem, 7vw, 7rem);
  }
}

@media (max-width: 699px) {
  /* Nur der Zeilenabstand wächst. `gap` ist die Kurzform für beide Achsen, und
     damit setzte diese Zeile auch 40 px zwischen die Spalten. Bei zwölf Spalten
     sind das elf Abstände, zusammen 440 px, in einem Telefon von 390 px: Das
     Raster stand breiter als der Bildschirm und die Seite liess sich seitwärts
     schieben. Sichtbar war der Spaltenabstand hier nie, weil auf dieser Breite
     jede Zelle über alle zwölf Spalten spannt. */
  .grid {
    column-gap: 0;
    row-gap: clamp(2.5rem, 9vw, 3.5rem);
  }
}

/* ---------- Atelier ---------- */

.studio {
  padding-block: var(--band);
  border-top: 1px solid var(--line-soft);
}

.studio__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.studio__title {
  font-size: clamp(2.2rem, 6.5vw, 5rem);
  max-width: 14ch;
}

.studio__body {
  display: grid;
  gap: 1.4rem;
  max-width: 52ch;
  color: var(--chalk-dim);
}

.studio__body strong {
  font-weight: 400;
  color: var(--chalk);
}

.facts {
  display: grid;
  gap: 0;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line-soft);
}

.facts div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}

.facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.facts dd {
  font-size: 0.95rem;
  color: var(--chalk);
}

@media (min-width: 900px) {
  .studio__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ---------- Kontakt ---------- */

.contact {
  padding-block: var(--band);
  border-top: 1px solid var(--line-soft);
}

.contact__grid {
  display: grid;
  gap: clamp(3rem, 7vw, 5rem);
}

.contact__title {
  font-size: clamp(2.2rem, 6.5vw, 5rem);
  max-width: 12ch;
}

.contact__text {
  max-width: 42ch;
  margin-top: 1.5rem;
  color: var(--chalk-dim);
}

.contact__card {
  margin-top: 2.5rem;
  display: grid;
  gap: 1.2rem;
}

.contact__card p {
  font-size: 0.95rem;
  color: var(--chalk-dim);
}

.contact__card a {
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease);
}

.contact__card a:hover {
  border-bottom-color: var(--sand);
}

.form {
  display: grid;
  gap: 1.4rem;
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field > span {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0.7rem 0 0.75rem;
  color: var(--chalk);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  transition: border-color 0.35s var(--ease);
}

.field select {
  /* Der Pfeil kommt vom System, die Fläche dahinter darf nicht weiss sein. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--chalk-dim) 50%),
                    linear-gradient(135deg, var(--chalk-dim) 50%, transparent 50%);
  background-position: right 0.6rem center, right 0.25rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

.field select option {
  background: var(--void-lift);
  color: var(--chalk);
}

.field textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--sand);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--chalk-faint);
}

.form__row {
  display: grid;
  gap: 1.4rem;
}

@media (min-width: 560px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--chalk);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.btn:hover {
  background: var(--chalk);
  border-color: var(--chalk);
  color: var(--void);
}

.btn--solid {
  background: var(--chalk);
  border-color: var(--chalk);
  color: var(--void);
}

.btn--solid:hover {
  background: var(--sand);
  border-color: var(--sand);
}

.form .btn {
  justify-self: start;
}

.form__note {
  font-size: 0.82rem;
  color: var(--chalk-faint);
}

.form__note[hidden] {
  display: none;
}

.form__sent {
  border-left: 1px solid var(--sand);
  padding-left: 1rem;
  color: var(--chalk-dim);
  font-size: 0.9rem;
}

/* ---------- Werkseite ---------- */

.piece {
  padding-block: clamp(2rem, 5vw, 3.5rem) var(--band);
}

.piece__crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chalk-dim);
  transition: color 0.3s var(--ease);
}

.piece__crumb:hover {
  color: var(--chalk);
}

.piece__layout {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

@media (min-width: 1000px) {
  .piece__layout {
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
    gap: clamp(3rem, 5vw, 5rem);
  }

  .piece__panel {
    position: sticky;
    top: 6rem;
  }
}

.shot {
  overflow: hidden;
}

.shot img,
.shot video {
  width: 100%;
  height: auto;
  /* Nur das Bild bekommt den Rahmen. Die Bildunterschrift steht auf der
     Seite, nicht auf einer Fläche. */
  background: var(--void-soft);
}

.shot + .shot {
  margin-top: var(--gap);
}

.shot figcaption {
  padding-top: 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.piece__no {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--chalk-faint);
}

.piece__title {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  margin-block: 0.6rem 1.6rem;
}

.piece__title cite,
.pager__name cite {
  font-style: italic;
}

.piece__note {
  display: grid;
  gap: 1.1rem;
  color: var(--chalk-dim);
  max-width: 44ch;
}

.piece__ask {
  margin-top: 2.5rem;
}

.pager {
  display: grid;
  gap: 1px;
  margin-top: var(--band);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.pager a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.4rem;
  transition: padding 0.4s var(--ease), color 0.4s var(--ease);
}

.pager a + a {
  border-top: 1px solid var(--line-soft);
}

.pager a:hover {
  padding-inline: 0.8rem;
}

.pager__dir {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}

.pager__name {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: right;
}

/* ---------- Fusszeile ---------- */

.colophon {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(3rem, 7vw, 5rem);
  background: var(--void-soft);
}

.colophon__row {
  display: grid;
  gap: 2rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 760px) {
  .colophon__row {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

.colophon__mark {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.colophon__lines {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--chalk-faint);
}

.colophon__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chalk-dim);
}

.colophon__nav a:hover {
  color: var(--chalk);
}

.colophon__demo {
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--chalk-faint);
  max-width: 62ch;
}

.colophon__demo a {
  color: var(--chalk-dim);
  border-bottom: 1px solid var(--line);
}

.colophon__demo a:hover {
  color: var(--sand);
}

/* ---------- Auftauchen beim Scrollen ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-hint::after,
  .tile__film::before {
    animation: none;
  }

  .tile__media img,
  .tile__media video {
    transition: none;
  }
}