/* About. One screen on desktop, like home: the 1440 x 874 Figma frame
   scales with the window (widths follow the width, gaps follow the
   height, type follows the smaller of the two). Phones stack and scroll. */


/* Header: name, title and menu icon as on home. If the page scrolls
   (short windows, phones), a soft bar appears behind them. */
.about .hdr-bar {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(250, 248, 243, 0.85);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 0.35s ease;
}
.about .site-header.is-bar .hdr-bar { opacity: 1; }

/* ---------- Layout: three columns of 384 with 48 between ---------- */
.ab {
  position: relative;
  min-height: var(--vh);
  padding: calc(144 * var(--sy)) calc(96 * var(--sx)) calc(24 * var(--sy));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(48 * var(--sx));
  grid-template-areas:
    "p1   p2   p3"
    "word word word"
    "exp  mid  contact";
  align-items: start;
}
.ab-p1 { grid-area: p1; }
.ab-p2 { grid-area: p2; }
.ab-p3 { grid-area: p3; }
.ab-word { grid-area: word; }
.ab-exp { grid-area: exp; }
.ab-mid { grid-area: mid; }
.ab-contact { grid-area: contact; }

/* Under the light (1) or above it (3) */
.ab-word { position: relative; z-index: 1; }
.ab-p, .ab-col { position: relative; z-index: 3; }

/* ---------- Intro ---------- */
.ab-p {
  margin: 0;
  font: 500 max(15px, calc(18 * var(--s)))/1.667 "Source Sans 3", sans-serif;
  color: var(--ink);
}

/* ---------- The word ---------- */
.ab-word {
  justify-self: center;
  margin: calc(18 * var(--sy)) calc(13 * var(--sx)) 0 0;   /* optically centered, as in Figma */
  font: 800 calc(144 * var(--s))/1 "Lexend", sans-serif;
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* ---------- Lists ---------- */
.ab-exp, .ab-mid, .ab-contact { margin-top: calc(57 * var(--sy)); }
.ab-col h2 {
  margin: 0;
  font: 700 max(14px, calc(18 * var(--s)))/1.778 "Lexend", sans-serif;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--accent);
}
.ab-rec { margin-top: calc(32 * var(--sy)); }
.ab-list {
  list-style: none; margin: calc(12 * var(--s)) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: calc(20 * var(--s));
}
.ab-list li {
  display: grid;
  grid-template-columns: minmax(0, calc(276 * var(--sx))) auto;
  column-gap: calc(48 * var(--sx));
  row-gap: calc(9 * var(--s));
  color: var(--ink);
}
.ab-list p { margin: 0; }
.ab-t { grid-column: 1; font: 700 max(15px, calc(18 * var(--s)))/1 "Lexend", sans-serif; }
.ab-t.is-long { line-height: 1.3; }
.ab-w { grid-column: 1; font: 500 max(12px, calc(14 * var(--s)))/1 "Source Sans 3", sans-serif; }
.ab-y { grid-column: 2; grid-row: 1; font: 500 max(13px, calc(16 * var(--s)))/1 "Source Sans 3", sans-serif; white-space: nowrap; }

/* ---------- Contact ---------- */
.ab-links {
  margin: calc(9 * var(--s)) 0 0;
  font: 500 max(15px, calc(18 * var(--s)))/1.667 "Source Sans 3", sans-serif;
}
/* Same as the index menu: no underline until hover, then one grows in
   from the left (and leaves to the right). The color stays. */
.ab-links a {
  display: table; color: var(--ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) right bottom 0.22em / 0 2px no-repeat;
  transition: background-size 0.35s cubic-bezier(0.6, 0, 0.2, 1);
}
.ab-links a:hover, .ab-links a:focus-visible { background-size: 100% 2px; background-position: left bottom 0.22em; }
.ab-links a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.about .site-name:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* ---------- Motion as the page opens (added by about.js only when motion is allowed) ---------- */
.rv-letters .ch { display: inline-block; opacity: 0; transform: translateY(0.35em); }
.rv-letters.is-in .ch { opacity: 1; transform: none; transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* Transitions only on the way in, so hiding is instant */
.rv { opacity: 0; transform: translateY(18px); }
.rv.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.7s ease var(--d, 0ms), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms);
}
.ab-links a.rv { display: table; }
/* keep the hover underline animated after the entrance */
.ab-links a.rv.is-in {
  transition: opacity 0.7s ease var(--d, 0ms), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms),
              background-size 0.35s cubic-bezier(0.6, 0, 0.2, 1) 0s;
}

/* ---------- Tablets: two columns, the word first, the page scrolls ---------- */
@media (min-width: 700px) and (max-width: 999px) {
  .ab {
    padding: 120px 48px 64px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    grid-template-areas: "word word" "p1 p2" "p3 p3" "exp mid" "contact contact";
  }
  .ab-word { justify-self: start; margin: 0 0 32px; font-size: 128px; }
  .ab-p { font-size: 17px; }
  .ab-p3 { margin-top: 1em; }
  .ab-exp, .ab-mid { margin-top: 56px; }
  .ab-contact { margin-top: 48px; }
  .ab-rec { margin-top: 40px; }
  .ab-list li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
}

/* ---------- Phones: one column, the word first ---------- */
@media (max-width: 699px) {
  .ab {
    padding: calc(108 * var(--sx)) calc(24 * var(--sx)) calc(64 * var(--sx));
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "word" "p1" "p2" "p3" "exp" "mid" "contact";
    row-gap: 0;
  }
  .ab-word {
    justify-self: start; margin: 0;
    font-size: calc(104 * var(--sx));
  }
  .ab-p { font-size: 17px; }
  .ab-p1 { margin-top: calc(28 * var(--sx)); }
  .ab-p2, .ab-p3 { margin-top: 1em; }
  .ab-exp { margin-top: calc(48 * var(--sx)); }
  .ab-mid, .ab-contact { margin-top: calc(40 * var(--sx)); }
  .ab-rec { margin-top: calc(40 * var(--sx)); }
  .ab-col h2 { font-size: 16px; }
  .ab-list { margin-top: 10px; gap: 18px; }
  .ab-list li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 7px; }
  .ab-t { font-size: 16px; }
  .ab-t.is-long { line-height: 1.3; }
  .ab-w { font-size: 13px; }
  .ab-y { font-size: 14px; }
  .ab-links { font-size: 17px; }
}