/* The author's Kabyle text accompanies intact family and assembly scenes. */
.about-content {
  --about-frame-tint: color-mix(in srgb, var(--desktop-backdrop) 62%, transparent);
  --about-letter-shadow: color-mix(in srgb, var(--desktop-backdrop) 95%, transparent);
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background: transparent;
  isolation: isolate;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.about-layout {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  --about-card-gap: clamp(16px, 2vw, 30px);
  --about-card-height: calc((100dvh - var(--top) - var(--tabs) - 30px) / 2);
  height: 100%;
  min-height: 0;
  align-items: start;
  isolation: isolate;
}
.about-layout > .about {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  width: min(38%, 520px);
  max-height: min(50dvh, var(--about-card-height));
  margin: var(--about-card-gap);
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 65%, transparent) transparent;
  scrollbar-gutter: stable;
  padding: clamp(22px, 2.4vw, 36px);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 18px;
  background: var(--about-frame-tint);
  box-shadow: inset 0 1px 0 #ffffff18, 0 8px 32px #00000012;
  color: var(--chrome-ink);
  text-shadow: 0 1px 2px var(--about-letter-shadow), 0 0 5px var(--about-letter-shadow);
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Preserve the reading position while the large launcher covers this window.
   Its photograph remains visible; the card returns with the compact Dock. */
body.dock-expanded-open #panel-about .about-layout > .about {
  visibility: hidden;
}
.about-layout > .about::-webkit-scrollbar { width: 4px; }
.about-layout > .about::-webkit-scrollbar-track { background: transparent; }
.about-layout > .about::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 65%, transparent);
}
.about-layout > .about:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 75%, transparent);
  outline-offset: 3px;
}
.about-layout .about-heading { margin-bottom: 18px; }
.about-layout .about-mark { color: var(--accent); font-size: 25px; line-height: 1; margin-bottom: 10px; }
.about-layout .overline { font-size: 11px; letter-spacing: .15em; font-weight: 650; margin: 0 0 10px; opacity: 1; }
.about-layout h2 { font-size: clamp(30px, 3vw, 46px); margin-bottom: 0; }
.about-layout .about-language p {
  max-width: 800px;
  margin: 0 0 14px;
  font-size: clamp(14px, .99vw, 16px);
  line-height: 1.7;
  opacity: 1;
}
.about-layout .about-verse {
  margin: 20px 0 0;
  padding: 12px 0 12px 20px;
  font-size: clamp(14px, .99vw, 16px);
  line-height: 1.75;
}
.about-layout .about-verse figcaption { margin-bottom: 12px; opacity: 1; }
.about-layout .about-verse p { margin: 0; opacity: 1; }
/* The scene fills the entire workspace. Theme colour belongs only to
   the translucent reading card; the photograph stays sharp and unmasked. */
.about-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.about-art::before, .about-art::after { display: none; }
.about-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Keep faces in view when a portrait fills a landscape workspace. */
.about-art img:is([src$="about-themes/langue.webp"], [data-visual-source$="about-themes/langue.webp"]) { object-position: center 40%; }
.about-art img:is([src$="about-themes/emeraude.webp"], [data-visual-source$="about-themes/emeraude.webp"]) { object-position: center 32%; }
.about-art img:is([src$="assets/agraw-traditions.webp"], [data-visual-source$="assets/agraw-traditions.webp"]) { object-position: center 22%; }
.about-art img:is([src$="about-themes/nuit.webp"], [data-visual-source$="about-themes/nuit.webp"]) { object-position: center 65%; }
body[data-tone="light"] .about-content {
  --about-frame-tint: color-mix(in srgb, var(--desktop-backdrop) 72%, transparent);
  --about-letter-shadow: #ffffffb3;
}
.about-without-art { background: var(--desktop-backdrop); }
.about-without-art > .about { width: min(38%, 520px); }

@media (min-width: 1800px) {
  .about-layout .about-language p, .about-layout .about-verse { font-size: 16px; }
}
@media (max-width: 900px), (max-aspect-ratio: 1 / 1) {
  .about-layout > .about {
    width: min(520px, calc(100% - 32px));
    margin: 14px 16px;
    padding: clamp(22px, 4vw, 30px);
    border-radius: 14px;
  }
  .about-layout .about-language p, .about-layout .about-verse { font-size: 14px; }
  .about-layout h2 { font-size: clamp(32px, 5.8vw, 46px); }
}
@media (max-width: 420px) {
  .about-layout > .about { width: calc(100% - 24px); margin: 12px; padding: 22px; }
  .about-layout .about-verse { padding-left: 18px; }
}