/* About / Friedrich photographic surface.
   The image owns the left viewport half on the established two-column layout;
   shared paired-content geometry continues to position only the right-side copy. */
.about-section--friedrich{
  display:block;
  min-height:100svh;
  padding:0;
}

.about-friedrich-content{
  position:relative;
  z-index:1;
  min-height:100svh;
  align-items:center;
  padding-top:clamp(7rem,13vh,10rem);
  padding-bottom:clamp(7rem,13vh,10rem);
}

.about-copy--friedrich{
  --friedrich-beat-gap:.35rem;
  --friedrich-section-gap:1.5rem;
  grid-column:2;
}

.about-friedrich-media{
  position:absolute;
  inset:0 auto 0 0;
  width:50%;
  overflow:visible;
}

.about-friedrich-gallery{
  position:relative;
  width:100%;
  height:100%;
}

.about-friedrich-gallery-frames{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.about-friedrich-gallery-frame{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.about-friedrich-gallery-frame.is-active{
  opacity:1;
  pointer-events:auto;
}

.about-friedrich-gallery-frame img,
.about-friedrich-placeholder{
  display:block;
  width:100%;
  height:100%;
}

.about-friedrich-gallery-frame img{
  object-fit:cover;
  object-position:50% 50%;
}

.about-friedrich-placeholder{
  position:relative;
  overflow:hidden;
  background:#15191a;
  color:rgba(255,255,255,.5);
}

.about-friedrich-placeholder::before,
.about-friedrich-placeholder::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.about-friedrich-placeholder::before{
  inset:12% 10%;
  border:1px solid rgba(255,255,255,.11);
  transform:skewX(-9deg);
}

.about-friedrich-placeholder::after{
  width:48%;
  height:160%;
  top:-30%;
  left:22%;
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.08);
  transform:rotate(28deg);
}

.about-friedrich-placeholder--3::before{
  inset:17% 14%;
  transform:rotate(-5deg);
}

.about-friedrich-placeholder--3::after{
  left:37%;
  transform:rotate(-24deg);
}

.about-friedrich-placeholder--4::before{
  inset:14% 12%;
  transform:skewY(7deg);
}

.about-friedrich-placeholder--4::after{
  left:12%;
  transform:rotate(41deg);
}

.about-friedrich-placeholder span,
.about-friedrich-placeholder b{
  position:absolute;
  z-index:1;
  margin:0;
  font-family:var(--font-body);
  font-style:normal;
  font-weight:400;
  pointer-events:none;
}

.about-friedrich-placeholder span{
  left:clamp(.9rem,1.4vw,1.35rem);
  bottom:clamp(.85rem,1.3vw,1.2rem);
  font-size:.56rem;
  letter-spacing:.18em;
}

.about-friedrich-placeholder b{
  right:clamp(1.1rem,2.2vw,2rem);
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.08);
  font-family:var(--font-display);
  font-size:clamp(5rem,10vw,9rem);
  font-weight:250;
  line-height:1;
}

.about-friedrich-credit{
  position:absolute;
  z-index:3;
  left:clamp(.8rem,1.1vw,1.15rem);
  bottom:clamp(.7rem,1vw,1rem);
  color:rgba(255,255,255,.64);
  font-size:.55rem;
  font-weight:350;
  letter-spacing:.015em;
  line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.52);
  white-space:nowrap;
}

.about-friedrich-credit[hidden]{
  display:none;
}

/* The gallery borrows the existing navigation attention-transfer grammar
   without becoming a shared navigation primitive: inactive points use the
   quiet nav text tone, the selected point uses the current theme accent, and
   exploring another point temporarily reduces the selected accent to 40%. */
.about-friedrich-gallery-nav{
  --friedrich-gallery-rest:color-mix(in srgb,var(--ink) 40%,var(--bg));
  position:absolute;
  z-index:4;
  left:calc(100% + clamp(.7rem,1vw,.95rem));
  bottom:calc(clamp(1.55rem,2vw,1.9rem) + .84rem);
  width:clamp(9rem,11vw,11rem);
  padding:.51rem 0;
  display:grid;
  gap:0;
}

.about-friedrich-gallery-choice{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  height:13px;
  min-height:13px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--friedrich-gallery-rest);
  cursor:pointer;
  text-align:left;
}

.about-friedrich-gallery-choice:focus-visible{
  outline:none;
}

.about-friedrich-gallery-dot{
  display:block;
  width:4px;
  height:4px;
  flex:0 0 4px;
  border-radius:999px;
  background:currentColor;
  transition:color .22s ease,box-shadow .22s ease;
}

.about-friedrich-gallery-choice.is-active{
  color:var(--accent);
}

.about-friedrich-gallery-choice:is(:hover,:focus-visible){
  color:var(--accent);
}

.about-friedrich-gallery-choice:focus-visible .about-friedrich-gallery-dot{
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 34%,transparent);
}

.about-friedrich-gallery-nav:has(.about-friedrich-gallery-choice:not(.is-active):focus-visible) .about-friedrich-gallery-choice.is-active{
  color:color-mix(in srgb,var(--accent) 40%,var(--bg));
}

@media(hover:hover) and (pointer:fine){
  .about-friedrich-gallery-nav:has(.about-friedrich-gallery-choice:not(.is-active):hover) .about-friedrich-gallery-choice.is-active{
    color:color-mix(in srgb,var(--accent) 40%,var(--bg));
  }
}

.about-friedrich-gallery-description{
  position:absolute;
  left:calc(4px + clamp(.65rem,.8vw,.8rem));
  top:.58rem;
  transform:translateY(-50%);
  color:var(--accent);
  font-size:.64rem;
  font-weight:400;
  letter-spacing:.025em;
  line-height:1.15;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
}

.about-friedrich-gallery-nav.is-description-visible .about-friedrich-gallery-description{
  opacity:.9;
}

@media(prefers-reduced-motion:reduce){
  .about-friedrich-gallery-frame,
  .about-friedrich-gallery-dot{
    transition:none;
  }
}

/* Keep one calm hierarchy throughout the profile: a modest gap separates
   adjacent thought-pairs, while the biography and sign-off use the larger
   section gap. The same minor beat is reused inside the desktop biography. */
.about-copy--friedrich .about-text.about-text--friedrich-opening + .about-text--friedrich-opening{
  margin-top:var(--friedrich-beat-gap);
}

.about-copy--friedrich .about-text.about-text--friedrich-bio,
.about-copy--friedrich .about-text.about-text--friedrich-signoff{
  margin-top:var(--friedrich-section-gap);
}

/* Friedrich follows the established mirrored Home A2/A4 text logic. The body
   measure is expressed in its own type size so the longest intended English
   line remains a near-fit while the responsive body-size curve changes. */
@media(min-width:921px){
  .about-copy--friedrich{
    justify-self:end;
    width:min(100%,34rem);
    max-width:34rem;
  }

  .about-copy--friedrich .about-kicker,
  .about-copy--friedrich .about-headline{
    text-align:right;
  }

  .about-copy--friedrich .about-text{
    max-width:29.55em;
    margin-left:auto;
    margin-right:0;
    text-align:left;
    /* Preserve the authored measure/line groups while making the left-aligned
       body read optically as one right-anchored block beneath the identity. */
    transform:translateX(clamp(.35rem,.45vw,.55rem));
  }

  /* Desktop keeps the authored English line groups distinct even where a
     narrower paired column requires one group to wrap internally. */
  html[lang="en"] .about-copy--friedrich .about-friedrich-line{
    display:block;
  }

  html[lang="en"] .about-copy--friedrich .about-text--friedrich-bio .about-friedrich-line:nth-child(3),
  html[lang="en"] .about-copy--friedrich .about-text--friedrich-bio .about-friedrich-line:nth-child(5){
    margin-top:var(--friedrich-beat-gap);
  }
}

/* From 1240px upward the paired column can accommodate every composed English
   line as one physical line at the editorial measure. */
@media(min-width:1240px){
  html[lang="en"] .about-copy--friedrich .about-friedrich-line{
    white-space:nowrap;
  }
}

@media(max-width:920px){
  .about-section--friedrich,
  .about-friedrich-content{
    min-height:auto;
  }

  .about-friedrich-content{
    padding-top:clamp(9rem,16vh,11rem);
    padding-bottom:clamp(5rem,10vh,7rem);
  }

  .about-copy--friedrich{
    grid-column:1;
    grid-row:1;
  }

  .about-friedrich-media{
    position:relative;
    inset:auto;
    width:100%;
  }

  .about-friedrich-gallery{
    aspect-ratio:1618 / 1080;
  }

  .about-friedrich-gallery-nav{
    left:auto;
    right:clamp(.25rem,1.5vw,.5rem);
    bottom:clamp(.8rem,2.8vw,1.1rem);
    width:2.75rem;
    padding:.1rem 0;
    gap:.08rem;
  }

  .about-friedrich-gallery-choice{
    justify-content:center;
    min-height:2.2rem;
  }

  /* On compact layouts the description sits directly over the photograph.
     Use an image-robust light foreground there while keeping desktop accent
     treatment unchanged outside this mobile composition. */
  .about-friedrich-gallery-description{
    display:block;
    left:auto;
    right:calc(100% + .15rem);
    max-width:calc(100vw - 5rem);
    color:rgba(255,255,255,.96);
    text-align:right;
    text-shadow:0 1px 4px rgba(0,0,0,.68);
  }
}