/* ==========================================================================
   About — notes on how I think, how I work, and the people I go home to.
   Loads after site.css (tokens, nav, section nav, footer, button, text link, cursor).

   The source's designer's notebook, on the site's white: the family board (a review canvas, photos on
   the board and notes in the margin), the logos, four values, four ways to work together, candour,
   and a hello.

   Type follows the site: serif Light 300 for the voice (the line, section titles, value and row titles,
   the email), Geist 400 to read (ledes, notes, labels), 500 to press (links, Copy), 600 to scan (names,
   tags). Sage is this page's accent, for state only: the dot, the pins, "Ongoing", the progress line.
   ========================================================================== */
.ab {
  --accent: #547E69;
  --tint: #E4EDE8;
  --plate: #F6F6F4;
  --hair: rgba(15, 15, 13, 0.1);
  --lift: 0 1px 2px rgba(15, 15, 13, 0.04), 0 12px 32px -18px rgba(15, 15, 13, 0.18);
  --top-nav: calc(var(--nav-top) + var(--nav-h) + env(safe-area-inset-top, 0px));
  background: #FFFFFF;
}
:root:has(.ab) { --accent: #547E69; }

.ab-col { width: min(100% - var(--gutter) * 2, 1180px); margin-inline: auto; }
.ab h3 { margin: 0; }   /* site.css resets h1/h2/p; titles here sit on their text by the grid gap alone */

/* ---------- Type ---------- */
.ab-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 400 15px/1.3 var(--font-sans);
  color: var(--ink-2);
}
.ab-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ab-label--plain::before { display: none; }

.ab-display,
.ab-h2,
.value__title,
.row__title,
.panel__title,
.mail__addr {
  font-family: var(--font-serif);
  font-weight: 300;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  color: var(--ink);
  text-wrap: balance;
}
.ab-display {
  max-width: 16ch;
  font-size: clamp(42px, min(6vw, 10vh), 92px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.ab-display em { font-style: italic; color: var(--accent); }
.ab-display .line { padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ab-h2 { font-size: clamp(34px, 3.8vw, 56px); line-height: 1.06; letter-spacing: -0.025em; }
.ab-lede { max-width: 44ch; font: 400 17px/1.5 var(--font-sans); color: var(--ink-2); text-wrap: pretty; }

.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--plate);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0;
  color: var(--ink-2);
  white-space: nowrap;
}
.tag--on { background: var(--tint); color: #2F5443; }

/* ---------- Hero ---------- */
.ab-hero { padding-top: calc(var(--top-nav) + clamp(56px, 11vh, 120px)); }
.ab-hero__intro {
  display: grid;
  justify-items: center;
  gap: clamp(16px, 2.4vh, 24px);
  text-align: center;
  margin-bottom: clamp(48px, 8vh, 88px);
}
.ab-hero__intro .ab-lede { margin-inline: auto; }
.ab-hero__intro .text-link svg { transition: transform 0.45s var(--ease-out); }

/* the board: a review canvas, notes in the margin and photos pinned on the canvas */
.board {
  position: relative;
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hair), var(--lift);
  overflow: hidden;
  scroll-margin-top: calc(var(--chrome) + 24px);
}
.board__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 52px;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid var(--hair);
  font: 400 14px/1 var(--font-sans);
  color: var(--ink-2);
}
.board__crumb { display: flex; align-items: center; gap: 12px; min-width: 0; white-space: nowrap; overflow: hidden; }
.board__crumb b { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.board__tools { display: flex; align-items: center; gap: 8px; }

.board__body { display: grid; grid-template-columns: minmax(280px, 0.32fr) minmax(0, 1fr); }
.board__thread { margin: 0; padding: 0; list-style: none; border-right: 1px solid var(--hair); }
.note {
  display: grid;
  gap: 10px;
  padding: 22px 22px 24px;
  border-bottom: 1px solid var(--hair);
  transition: background-color 0.4s var(--ease-out);
}
.note:last-child { border-bottom: 0; }
.note.is-hot { background: #FBFBFA; }
.who { display: flex; align-items: center; gap: 9px; font: 400 14px/1 var(--font-sans); color: var(--ink-2); }
.who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.who b { font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.note__text { font: 400 15px/1.55 var(--font-sans); color: var(--ink); text-wrap: pretty; }
.note__link { font-weight: 500; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; }
.note__attach { display: flex; gap: 8px; }
.note__attach img { width: 56px; height: 76px; border-radius: 8px; object-fit: cover; box-shadow: inset 0 0 0 1px var(--hair); }

.board__canvas {
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 40px);
  background:
    radial-gradient(circle at 1px 1px, rgba(15, 15, 13, 0.07) 1px, transparent 1.2px) 0 0 / 18px 18px,
    #FCFCFB;
}
.spread {
  display: grid;
  grid-template-columns: 0.62fr 1.6fr 0.62fr;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  width: 100%;
}
.shot { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--plate); box-shadow: 0 1px 2px rgba(15, 15, 13, 0.06), 0 18px 36px -24px rgba(15, 15, 13, 0.4); transition: box-shadow 0.5s var(--ease-out); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--tall { aspect-ratio: 982 / 1744; }
.shot--wide { aspect-ratio: 1800 / 1240; }
.shot.is-hot { box-shadow: 0 0 0 2px var(--accent), 0 24px 44px -24px rgba(15, 15, 13, 0.45); }
.pin {
  position: absolute;
  left: 12px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  color: #fff;
  font: 600 11px/1 var(--font-sans);
  box-shadow: 0 2px 8px rgba(15, 15, 13, 0.18);
}

/* the logos, quiet */
.trust { display: grid; justify-items: center; gap: 28px; padding: clamp(64px, 10vh, 104px) 0 clamp(24px, 4vh, 40px); text-align: center; }
.marks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}
.marks li { display: flex; align-items: center; justify-content: center; height: 48px; }
.marks img { width: auto; height: var(--h, 26px); max-width: 100%; filter: grayscale(1); opacity: 0.42; transition: opacity 0.4s var(--ease-out), filter 0.4s var(--ease-out); }
.marks img:hover { opacity: 0.9; filter: grayscale(0); }

/* ---------- Sections ---------- */
.ab-section { padding-block: clamp(88px, 14vh, 160px) 0; scroll-margin-top: calc(var(--chrome) + 8px); }
.ab-intro { display: grid; justify-items: center; gap: 16px; text-align: center; margin-bottom: clamp(40px, 6vh, 64px); }
.ab-intro .ab-lede { margin-inline: auto; }

/* values: four cards, the icon on a quiet plate */
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.value {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 24px) clamp(24px, 2.4vw, 32px);
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hair);
}
.value__plate {
  position: relative;
  display: block;
  height: clamp(200px, 22vw, 280px);
  margin-bottom: 12px;
  border-radius: 16px;
  background: var(--plate);
  overflow: hidden;
}
.value__plate img {
  /* one box for every icon, pinned to the plate's centre (inset 0 + auto margins: exact at any size);
     the drawing fits it, and its SVG is cropped to the artwork so the drawing itself is centred */
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56%;
  height: 52%;
  object-fit: contain;
  object-position: 50% 50%;
  transition: transform 0.9s var(--ease-out);
}
.value:hover .value__plate img { transform: translateY(-6px) scale(1.04); }
.value__title { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.02em; }
.value__text { max-width: 46ch; font: 400 16px/1.55 var(--font-sans); color: var(--ink-2); text-wrap: pretty; }

/* collaboration: the intro holds still while the rows pass */
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ab-intro--side { justify-items: start; text-align: left; margin: 0; position: sticky; top: calc(var(--chrome) + 40px); }
.ab-intro--side .ab-lede { margin-inline: 0; }
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 28px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--hair); }
.row__tile {
  position: relative;
  display: block;
  flex: none;
  width: 128px;
  height: 128px;
  border-radius: 16px;
  background: var(--plate);
  transition: scale 0.7s var(--ease-out), background-color 0.5s var(--ease-out);
}
.row__tile img { position: absolute; inset: 0; margin: auto; width: 68%; height: 60%; object-fit: contain; transition: scale 0.7s var(--ease-out); }
/* hover: the tile and its drawing open up a touch, together (no tilt) */
.row:hover .row__tile { scale: 1.04; background: #F1F1EE; }
.row:hover .row__tile img { scale: 1.1; }
.row__copy { display: grid; gap: 8px; }
.row__title { font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.02em; }
.row__text { font: 400 16px/1.55 var(--font-sans); color: var(--ink-2); text-wrap: pretty; }

/* candour: two margin-note panels */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.panel { display: flex; flex-direction: column; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px; border-bottom: 1px solid var(--hair); }
.panel__title { font-size: clamp(24px, 2vw, 28px); line-height: 1.1; letter-spacing: -0.02em; }
.panel__note { display: grid; justify-items: start; gap: 10px; padding: 22px 24px; border-bottom: 1px solid var(--hair); }
.panel__note p { font: 400 15px/1.55 var(--font-sans); color: var(--ink); text-wrap: pretty; }
.panel__foot { margin-top: auto; padding: 16px 24px; background: #FAFAF9; font: 400 14px/1.4 var(--font-sans); color: var(--ink-2); }

/* say hello */
.ab-hello { padding-bottom: clamp(104px, 16vh, 176px); }
.mail { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 20px; }
.mail__addr {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  background: linear-gradient(var(--hair), var(--hair)) 0 100% / 100% 1px no-repeat;
  padding-bottom: 4px;
  transition: background-image 0.4s;
}
.mail__addr:hover { background-image: linear-gradient(var(--accent), var(--accent)); }
.mail__copy { margin-top: 0; }
.elsewhere { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 24px 0 0; padding: 0; list-style: none; }

/* ---------- Motion: reveals (the board is scrubbed in about.js) ---------- */
.motion [data-reveal] { opacity: 0; translate: 0 24px; }
.motion [data-reveal].is-in { opacity: 1; translate: 0 0; transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out); }

/* ---------- Narrow ---------- */
@media (max-width: 960px) {
  .board__body { grid-template-columns: minmax(0, 1fr); }
  .board__thread { order: 2; border-right: 0; border-top: 1px solid var(--hair); }
  .marks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ab-intro--side { position: static; }
  .panels { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ab-display { font-size: clamp(38px, 10.4vw, 52px); }
  .ab-lede { font-size: 16px; }
  .values { grid-template-columns: minmax(0, 1fr); }
  .value__plate { height: 180px; }
  .spread { grid-template-columns: 1fr 1fr; gap: 10px; }
  .spread .shot--wide { grid-column: 1 / -1; order: -1; }
  .board__bar .board__crumb .tag, .board__tools .tag:not(.tag--on) { display: none; }
  .row { grid-template-columns: 84px minmax(0, 1fr); gap: 18px; padding: 22px 0; }
  .row__tile { width: 84px; height: 84px; border-radius: 12px; }
  .marks { gap: 20px 16px; }
  .marks img { height: calc(var(--h, 26px) * 0.82); }
  .ab-section { padding-top: clamp(72px, 11vh, 120px); }
}

/* big monitors: the voice and the words grow with the screen */
@media (min-width: 1900px) and (min-height: 1000px) {
  .ab-col { width: min(100% - var(--gutter) * 2, 1480px); }
  .ab-display { font-size: 112px; }
  .ab-h2 { font-size: 68px; }
  .ab-lede { font-size: 20px; }
  .value__title, .row__title { font-size: 38px; }
  .value__plate { height: 360px; }
  .row { grid-template-columns: 152px minmax(0, 1fr); }
  .row__tile { width: 152px; height: 152px; border-radius: 20px; }
  .who img { width: 34px; height: 34px; }
  .value__text, .row__text, .panel__note p, .note__text { font-size: 18px; }
}