/* ------------------------------------------------------------
   About me
   Builds on styles.css and the shared bar in landing.css.
   Positions are grid units (--u) of the 2000 × 1130 design,
   measured from the top-left of the area below the bar. Boxes
   with text use --tu, so they grow in small windows.
   ------------------------------------------------------------ */

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

/* ---------- Scroll area ----------
   As on the projects page: the page stays put, the content
   scrolls inside the frame, between the bar and the bottom line */

.about-page .content {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.about-page .content::-webkit-scrollbar {
  display: none;
}

/* The design's 1836 units, centred in wider windows. The height
   is set by about.js (down to the lowest element); this is the
   fallback without JavaScript. */
.about {
  position: relative;
  width: calc(1836 * var(--u));
  min-height: calc(1800 * var(--u));
  margin: 0 auto;
}

/* ---------- Tiles ----------
   Closed: a small box with the lettering. Open: wider, the
   content below a line, a cross to close it.

   POSITIONS (design pixels):
   --first-y    top of the first tile
   --tile-gap   space between one tile and the next, the same
                for all, closed or open (tiles below an open one
                move down with it)
   --x          left edge of each tile
   about.js keeps these where it can. Only if a tile would run
   into the photo, the text or the CV buttons does it move down
   (keeping --gap to them), and if it would stick out of the frame
   it moves left. */

.about {
  --first-y: 298;
  --tile-gap: 126;
  --gap: 60;
}

.tile--education        { --x: 82; }
.tile--work             { --x: 165; }
.tile--languages        { --x: 543; }
.tile--skills           { --x: 961; }
.tile--acknowledgements { --x: 1211; }

.tile {
  --head: calc(124 * var(--tu));
  --pad: calc(42 * var(--tu));
  --letter-h: calc(22.4 * var(--tu));
  --open-w: calc(583 * var(--tu));
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * var(--u));
  /* Without JavaScript; about.js sets the real top */
  top: calc((var(--first-y) + var(--i) * (124 + var(--tile-gap))) * var(--u));
  /* Closed: as wide as the lettering (--ratio: about.js) */
  width: calc(var(--letter-h) * var(--ratio, 8) + 2 * var(--pad) + 2 * var(--stroke));
  box-shadow: inset 0 0 0 var(--stroke) var(--ink); /* not border: browsers round thin borders down */
  background: var(--bg);
  /* No fade: the tiles simply appear, one after another */
  animation: show 0.01s steps(1) calc(var(--t0) + 1.1s + var(--i) * 0.15s) backwards;
}

.tile.is-open {
  width: var(--open-w);
}

/* Only opening and closing move, not the first layout */
.can-move .tile,
.can-move .downloads {
  transition:
    width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    top 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    left 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.tile__head {
  margin: 0;
  font: inherit;
}

.tile__open {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--head);
  padding: 0 var(--pad);
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

/* Open: hovering the top shows that it closes the tile (cross) */
.tile.is-open .tile__head:hover + .tile__close svg {
  stroke-width: 3;
}

.tile__lettering {
  display: block;
  height: var(--letter-h);
}

/* Inline SVG (about.js): the letters thicken on hover, like the logo */
.tile__lettering svg {
  display: block;
  height: 100%;
  width: auto;
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  transition: stroke-width 0.35s ease;
}

.tile:not(.is-open) .tile__open:hover svg,
.tile:not(.is-open) .tile__open:focus-visible svg {
  stroke-width: 1.1;
}

.tile__open:focus-visible,
.tile__close:focus-visible,
.download:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* Cross: only on open tiles */
.tile__close {
  position: absolute;
  top: calc((var(--head) - 27 * var(--tu)) / 2);
  right: calc(41 * var(--tu));
  width: calc(27 * var(--tu));
  height: calc(27 * var(--tu));
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}

/* Hit area a little larger than the cross */
.tile__close::before {
  content: "";
  position: absolute;
  inset: -12px;
}

.tile__close svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
  transition: stroke-width 0.35s ease;
}

.tile__close:hover svg,
.tile__close:focus-visible svg {
  stroke-width: 3;
}

.tile.is-open .tile__close {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease 0.25s, visibility 0s;
}

/* Content: opens in height (grid rows 0fr → 1fr) */
.tile__body {
  display: grid;
  overflow: hidden;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0.5s;
  visibility: hidden;
}

.tile.is-open .tile__body {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}

.tile__inner {
  /* Always laid out at the open width, so its height is known
     before the tile has finished widening */
  width: var(--open-w);
  min-height: 0;
  overflow: hidden;
  /* Line between the title and the content */
  box-shadow: inset 0 var(--stroke) 0 0 var(--ink);
}

/* ---------- Entries (texts.md, rendered by texts.js "cv") ---------- */

.tile__inner {
  font-size: var(--small-text);
  line-height: 1.32;
}

.tile__inner::before,
.tile__inner::after {
  content: "";
  display: block;
  height: calc(42 * var(--tu));
}

.tile__inner::after {
  height: calc(50 * var(--tu));
}

.entry {
  display: flex;
  gap: calc(20 * var(--tu));
  padding: 0 var(--pad);
  text-wrap: pretty;
}

.entry + .entry {
  margin-top: 1.32em; /* one empty line */
}

.entry p {
  margin: 0;
}

.entry__period {
  flex: none;
  width: calc(105 * var(--tu));
  font-weight: 700;
  font-stretch: 97%;
}

.entry__text {
  flex: 1;
  min-width: 0;
}

.entry strong {
  font-weight: 700;
}

.tile__inner a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: var(--stroke);
  text-underline-offset: 0.18em;
}

/* ---------- Photo and text ---------- */

/* Photo in a frame; the image keeps its proportions (3 : 4) */
.portrait {
  position: absolute;
  top: calc(89 * var(--u));
  /* Keeps the designed overlap with the text box, also when the
     box grows to the left in smaller windows (iPad) */
  left: calc(1604 * var(--u) - 586 * var(--tu));
  z-index: 1;
  width: calc(313 * var(--u));
  margin: 0;
  padding: calc(35 * var(--u));
  box-shadow: inset 0 0 0 var(--stroke) var(--ink);
  background: var(--bg);
  animation: show 0.01s steps(1) var(--t0) backwards;
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
  /* Fades in once loaded (about.js), so the frame isn't empty first */
  transition: opacity 0.4s ease;
}

.js .portrait.is-waiting img {
  opacity: 0;
}

/* Short text, overlapping the photo frame */
.intro-text {
  position: absolute;
  top: calc(422 * var(--u));
  /* Right edge fixed; in small windows it grows to the left */
  right: calc(50 * var(--u));
  z-index: 1;
  width: calc(586 * var(--tu));
  padding: calc(42 * var(--tu)) calc(40 * var(--tu)) calc(36 * var(--tu)) calc(42 * var(--tu));
  box-shadow: inset 0 0 0 var(--stroke) var(--ink);
  background: var(--bg);
  font-size: var(--small-text);
  line-height: 1.22;
  text-align: left;
  text-wrap: pretty;
  hyphens: auto;
  animation: show 0.01s steps(1) calc(var(--t0) + 0.4s) backwards; /* no fade: simply appears */
}

.intro-text p {
  margin: 0;
}

.intro-text p + p {
  margin-top: 1.22em;
}

/* Download arrow with the two CV buttons, both always visible.
   Its top is level with the SKILLS tile and moves with it
   (about.js); the positions inside are from that top. */
.downloads {
  position: absolute;
  top: calc(1048 * var(--u));
  left: 0;
  right: 0;
  animation: show 0.01s steps(1) calc(var(--t0) + 2s) backwards;
}

.downloads__icon {
  position: absolute;
  top: 0;
  left: calc(174 * var(--u));
  width: calc(257 * var(--u));
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--stroke);
}

.downloads__icon * {
  vector-effect: non-scaling-stroke;
}

.download {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100 * var(--tu));
  padding: 0 calc(42 * var(--tu));
  box-shadow: inset 0 0 0 var(--stroke) var(--ink);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--small-text);
  text-decoration: none;
  white-space: nowrap;
  /* Hover: eases into bold, the width axis keeps the text size */
  transition: font-weight 0.4s ease, font-stretch 0.4s ease;
}

.download:hover,
.download:focus-visible {
  font-weight: 700;
  font-stretch: 92%;
}

/* English: right of the arrow */
.download--en {
  top: calc(313 * var(--u));
  left: calc(338 * var(--u));
  min-width: calc(270 * var(--tu));
  z-index: 1;
}

/* German: on top, a little lower and further left */
.download--de {
  top: calc(313 * var(--u) + 84 * var(--tu));
  left: calc(126 * var(--u));
  min-width: calc(277 * var(--tu));
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .about-page *,
  .about-page *::before,
  .about-page *::after {
    animation: none !important;
    transition: none !important;
  }
}