/* About: one image window, three editorial cues, full-width discipline rows. */
#about.about-reel {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  grid-template-rows:auto auto auto;
  column-gap:50px;
  row-gap:20px;
  padding:50px 2% 65px;
  background:#fff;
  color:#111;
}
#about.about-reel > * { min-width:0; margin:0; }
#about.about-reel > .eyebrow { grid-area:1 / 1; padding-top:5px; }
#about.about-reel h2 {
  grid-area:1 / 2;
  font-size:clamp(54.432px,6.048vw,93.744px);
  line-height:.75;
  letter-spacing:-.02em;
  margin-bottom:20px;
}
#about.about-reel .about-portrait {
  grid-area:2 / 1;
  position:relative;
  align-self:start;
  justify-self:end;
  width:min(100%,300px);
  aspect-ratio:1;
  min-height:0;
  /* The next row starts on the lower corner marks: 7px below the square. */
  margin-bottom:calc(7px - 20px);
}
#about .about-screen {
  position:absolute; inset:0; width:100%; height:100%;
  overflow:hidden; background:#e1ff80; color:#101010;
  border:0; border-radius:0; padding:0;
  cursor:pointer;
}
#about .about-monogram {
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:'Portfolio Wordmark','Arial Black',sans-serif;
  font-weight:900; font-style:italic;
  font-size:96px; line-height:.75;
  /* Center the visible italic glyph, compensating for its font metrics. */
  transform:translate(-.085em,-.035em);
}
#about .about-screen img,
#about .about-screen video {
  position:absolute;
  left:0; top:0;
  display:block;
  max-width:none;
  width:100%; height:100%;
  object-fit:cover;
  object-position:49% 40%;
}
#about .about-screen .about-reel-frame { object-fit:fill; }
#about .about-screen .about-portrait-video { visibility:hidden; transition:none; pointer-events:none; object-position:center; }
#about .about-screen[data-mode="loading"] .about-portrait-video,
#about .about-screen[data-mode="video"] .about-portrait-video { visibility:visible; }
#about .about-screen[data-mode="loading"]::after { content:""; position:absolute; inset:0; z-index:1; background:#e1ff80; }
#about .about-screen[data-mode="loading"] .about-monogram { z-index:2; }
#about .about-screen[data-mode="video"] .about-monogram,
#about .about-screen[data-mode="reel"] .about-monogram { visibility:hidden; }
#about .about-corner { position:absolute; width:14px; height:14px; border:solid #111; pointer-events:none; }
#about .top-left { top:-7px; left:-7px; border-width:1px 0 0 1px; }
#about .top-right { top:-7px; right:-7px; border-width:1px 1px 0 0; }
#about .bottom-left { bottom:-7px; left:-7px; border-width:0 0 1px 1px; }
#about .bottom-right { bottom:-7px; right:-7px; border-width:0 1px 1px 0; }
#about.about-reel .about-editorial {
  grid-area:2 / 2;
  display:flex;
  flex-direction:column;
  max-width:620px;
}
#about.about-reel .about-copy {
  flex:none;
  margin:0;
  max-width:620px;
  font-size:20px;
  line-height:1.5;
  letter-spacing:-.025em;
  color:inherit;
}
#about .about-keyword {
  display:inline;
  border:0; border-radius:0; padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  font-family:'PP NeueBit',monospace;
  font-size:calc(1em * var(--about-keyword-scale,1.53));
  font-weight:700;
  line-height:.65;
  letter-spacing:-.02em;
  vertical-align:baseline;
  text-decoration:none;
  text-transform:none;
  cursor:pointer;
  outline:none;
  transition:background-color .15s ease;
}
#about .about-keyword:hover,
#about .about-keyword[aria-pressed="true"] { background:#dfff7e; color:#111; }
html[lang="de"] #about .about-after-story::before,
html[lang="de"] #about .about-after-possibles::before { content:' '; white-space:pre; }
#about.about-reel .about-detail {
  flex:1;
  display:grid;
  align-items:center;
  max-width:620px;
  padding:30px 0;
  /* Include the following grid gap when centering the caption. */
  margin:0 0 -20px;
}
#about.about-reel .about-detail p {
  grid-area:1 / 1;
  max-width:none;
  margin:0;
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.02em;
  color:#555;
}
#about .about-detail p[aria-hidden="true"] { visibility:hidden; }
#about.about-reel .disciplines {
  grid-area:3 / 2;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  width:100%; max-width:620px;
  gap:8px;
  margin-top:0;
}
#about .about-discipline-row { display:flex; flex-wrap:nowrap; gap:8px; width:100%; }
#about .disciplines .discipline-button {
  flex:1 1 auto;
  min-width:0;
  min-height:42px;
  padding:12px 18px;
  border:1px solid #111;
  border-radius:100px;
  font-size:11px;
  line-height:1.25;
  text-align:center;
}
#about .disciplines > .discipline-button { width:100%; }
@media(max-width:1000px) {
  #about.about-reel { column-gap:32px; padding:50px 24px 60px; }
  #about.about-reel h2 { font-size:clamp(50px,6.048vw,70px); margin-bottom:20px; }
  #about .about-discipline-row, #about.about-reel .disciplines { gap:8px; }
  #about .disciplines .discipline-button { padding:12px 10px; }
}
@media(max-width:700px) {
  #about.about-reel { grid-template-columns:1fr; grid-template-rows:none; gap:22px; padding:35px 20px 50px; }
  #about.about-reel > .eyebrow { grid-area:auto; }
  #about.about-reel h2 { grid-area:auto; font-size:clamp(44px,10.5vw,60px); margin:6px 0 8px; }
  #about.about-reel .about-portrait { grid-area:auto; width:100%; margin-bottom:0; }
  #about.about-reel .about-editorial { grid-area:auto; }
  #about.about-reel .about-copy { font-size:18px; line-height:1.5; }
  #about.about-reel .about-detail { flex:none; padding:32px 0 0; margin:0 0 10px; }
  #about.about-reel .disciplines { grid-area:auto; margin-top:0; }
  #about .disciplines .discipline-button { padding:12px 8px; }
}
@media(max-width:360px) {
  #about .about-discipline-row { flex-wrap:wrap; }
  #about .about-discipline-row .discipline-button:last-child { flex-basis:100%; }
}