/* ==========================================================================
   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: Signifier for the voice (the line, section titles, value and row titles,
   the email), Söhne 400 to read (ledes, notes, labels), 450 to press (links, Copy), Kräftig 500 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: 400;
  font-optical-sizing: auto;
  color: var(--ink);
  text-wrap: balance;
}
.ab-display {
  max-width: 17.5ch;   /* Signifier holds ~9% fewer characters per ch than Fraunces Light did at display size */
  font-size: clamp(39.48px, min(5.64vw, 9.4vh), 86.48px);
  line-height: 1.12;
  letter-spacing: -0.021em;
}
.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(31.96px, 3.572vw, 52.64px); line-height: 1.14; letter-spacing: -0.017em; }
.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: 500 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: 500; color: var(--ink); letter-spacing: -0.006em; }
.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: 500; color: var(--ink); letter-spacing: -0.006em; }
.note__text { font: 400 15px/1.55 var(--font-sans); color: var(--ink); text-wrap: pretty; }
.note__link { font-weight: 450; 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: 500 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(24.44px, 2.068vw, 30.08px); line-height: 1.18; letter-spacing: -0.014em; }
.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(22.56px, 1.88vw, 28.2px); line-height: 1.18; letter-spacing: -0.014em; }
.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(22.56px, 1.88vw, 26.32px); line-height: 1.1; letter-spacing: -0.014em; }
.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(26.32px, 3.196vw, 45.12px);
  line-height: 1.1;
  letter-spacing: -0.014em;
  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: the story unfolds ----------
   On arrival the line sets itself word by word, then the lede, the link and the board.
   Everything after is scrubbed by scroll in about.js, so it unfolds at the reader's pace and folds back on
   the way up: titles ink in word by word, cards and rows are dealt in turn, their drawings settle a beat
   later, notes arrive one by one, the address underlines itself. Small distances, no blur past the first line. */
.ab-display .w { display: inline-block; }
.motion .ab-display .w { animation: abWord 1.1s var(--ease-out) calc(0.18s + var(--i) * 0.065s) both; }
.motion [data-in] { animation: abRise 1.1s var(--ease-out) var(--d, 0s) both; }
@keyframes abWord { from { opacity: 0; filter: blur(6px); transform: translateY(0.32em); } to { opacity: 1; filter: none; transform: none; } }
@keyframes abRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- 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(35.72px, 9.776vw, 48.88px); }
  .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; }
}