/* ============================================================
   /about — the hero, the categories and the closing block.
   The collage's own styles, the header, menu and footer all come
   from style.css, so this file only holds what is new to this page.
   ============================================================ */

.about-body { --hand: clamp(1.02rem, 1.45vw, 1.28rem); }

/* every section heading, in the greeting's face and size. This rule was lost
   when the hero replaced the old intro block, which left the headings falling
   back to the browser's default h2. */
.ab-h {
  color: var(--ink);
  font-family: "Space Mono", ui-monospace, monospace;
  font-style: italic;
  font-weight: 400;
  font-size: var(--hand);
  letter-spacing: -0.02em;
}

/* ---------- 1. hero: writing left, collage right, inside the first screen ---------- */
/* shared measure for the blocks below the hero. This rule was collateral from a
   regex clean-up of the old .ab-intro styles, which left both sections flush
   against the left edge with no gutter and nothing anchoring the wand. */
.ab-now, .ab-say {
  padding: 0 var(--gutter);
  margin: 0 auto;
}

.ab-hero {
  display: block;
  padding: calc(var(--header-h) + clamp(40px, 7vh, 80px)) var(--gutter) clamp(12px, 1.6vw, 22px);
}
.ab-hero-text { max-width: 760px; margin: 0 auto; }
.ab-hero-text p {
  font-size: clamp(0.95rem, 1.05vw, 1.04rem);
  line-height: 1.7;
  color: var(--ink);
}
.ab-hero-text p + p { margin-top: 1.1em; }

/* straight after the greeting, with only the collage's own top margin */
/* -16px so the gap under the greeting matches the 20px above it: the stage
   itself carries ~19px of empty room over its topmost object */
.ab-hero .collage { width: min(760px, 100%); margin: -16px auto 0; }

.ab-title {
  /* sized and coloured off the home hero, so the two page openers match */
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: clamp(18px, 2.4vw, 30px);
}
/* the small label over the greeting, in Manrope and the same colour as the
   home page's own About Me */
.ab-hero-text .ab-eyebrow {
  text-align: center;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  /* --hand is the greeting's size; Manrope reads smaller than Space Mono at
     the same px, so this is nudged up to sit level with it */
  font-size: calc(var(--hand) * 1.18);
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: clamp(10px, 1.4vw, 16px);
}

.ab-hey {
  text-align: center;
  /* it is the page's h1 now, so the weight has to be said explicitly */
  font-weight: 400;
  font-family: "Space Mono", ui-monospace, monospace;
  font-style: italic;
  font-size: var(--hand) !important;
  color: var(--ink);
  margin-bottom: 0.9em;
}

/* everything in the hero arrives in sequence off the one .in, so the text and
   the collage read as a single entrance rather than four separate ones */
.js .ab-hero .ab-hero-text > *,
.js .ab-hero .collage {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.95s var(--ease);
}
.js .ab-hero.in .ab-hero-text > *,
.js .ab-hero.in .collage { opacity: 1; transform: none; }
.js .ab-hero .ab-hero-text > :nth-child(1) { transition-delay: 0.04s; }
.js .ab-hero .ab-hero-text > :nth-child(2) { transition-delay: 0.16s; }
.js .ab-hero .ab-hero-text > :nth-child(3) { transition-delay: 0.26s; }
.js .ab-hero .ab-hero-text > :nth-child(4) { transition-delay: 0.34s; }
.js .ab-hero .ab-hero-text > :nth-child(5) { transition-delay: 0.42s; }
.js .ab-hero .collage { transition-delay: 0.2s; }
/* the section itself no longer moves; its children do */
.js .reveal.ab-hero { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .ab-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: calc(var(--header-h) + 40px);
  }
  .ab-hero-text { max-width: none; }
  .ab-hero .collage { width: min(100%, 560px); }
}

/* ---------- 2. what i've been up to: hoverable categories ---------- */
.ab-now { max-width: 900px; padding-bottom: clamp(28px, 3.6vw, 48px); }
.ab-dots { color: var(--rose); }

.cats {
  margin-top: clamp(20px, 2.6vw, 32px);
  background: #fafafa;
  border-radius: clamp(18px, 2.4vw, 28px);
  padding: clamp(12px, 1.5vw, 18px) clamp(14px, 1.8vw, 22px);
}
.cat-list { display: flex; flex-direction: column; }
.cat-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(14px, 2.4vw, 32px);
  padding: 8px clamp(6px, 1vw, 12px);
  border-radius: 12px;
  transition: background 0.3s var(--ease);
}
.cat-row:hover { background: #fff; }
/* plain text rather than a pill, in the same handwritten face as the other
   labels on the page */
.cat {
  font-family: "Space Mono", ui-monospace, monospace;
  font-style: italic;
  font-size: clamp(0.82rem, 0.95vw, 0.9rem);
  color: var(--gray8);
  letter-spacing: -0.015em;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.cat-row:hover .cat { color: var(--ink); }
.cat-v {
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  line-height: 1.6;
  color: var(--gray8);
  text-wrap: pretty;
  transition: color 0.25s var(--ease);
}
.cat-row:hover .cat-v { color: var(--ink); }

@media (max-width: 600px) {
  .cat-row { grid-template-columns: 1fr; gap: 7px; }
  .cat { justify-self: start; }
}

/* ---------- the toys, under the categories ---------- */
.toys-h {
  margin-top: clamp(34px, 5vw, 66px);
  text-align: center;
  font-family: "Space Mono", ui-monospace, monospace;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--gray8);
}
.toys-h + .now-toys { margin-top: clamp(14px, 1.8vw, 22px); }
.now-toys {
  margin-top: clamp(30px, 4.5vw, 62px);
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(22px, 4vw, 54px);
}
.toy { position: relative; }
.toy img { width: auto; }

/* --- record player: grey until you touch it, notes while hovering or playing --- */
.toy-record {
  cursor: pointer;
  transition: scale 0.35s var(--spring);
  animation: toy-float 5.6s ease-in-out infinite;
}
.toy-record img { height: clamp(72px, 9vw, 100px); pointer-events: none; }
.toy-record:hover { scale: 1.1; }

.rp-note {
  position: absolute;
  color: var(--taupe);
  line-height: 1;
  pointer-events: none;
  z-index: 5;
  animation: rp-up 1.4s ease-out forwards;
}
@keyframes rp-up {
  from { opacity: 1; translate: 0 0;                scale: 1; }
  to   { opacity: 0; translate: var(--drift) -70px; scale: 0.7; }
}

.toy-art {
  display: block;
  animation: toy-float 6.4s ease-in-out 0.8s infinite;
  transition: scale 0.35s var(--spring);
}
.toy-art:hover { scale: 1.08; }
.toy-art .toy-base { height: clamp(72px, 9vw, 100px); }

.toy-coffee {
  display: block;
  animation: toy-float 5.1s ease-in-out 0.35s infinite;
  transition: scale 0.35s var(--spring);
}
.toy-coffee:hover { scale: 1.08; }
.toy-coffee img { height: clamp(58px, 7.4vw, 80px); }
/* every toy can carry a caption; it doubles as the invitation */
.toy-cap {
  position: absolute; top: calc(100% + 10px); left: 50%;
  width: max-content; max-width: 150px;
  translate: -50% -4px;
  text-align: center;
  font-family: "Space Mono", ui-monospace, monospace;
  font-style: italic;
  font-size: 0.72rem; line-height: 1.35;
  color: var(--gray8);
  text-wrap: balance;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), translate 0.35s var(--spring);
}
.toy:hover .toy-cap, .toy-record.on .toy-cap { opacity: 1; translate: -50% 0; }

@keyframes toy-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* ---------- 5. closing ---------- */
.ab-say {
  position: relative;
  max-width: 660px;
  padding-top: clamp(46px, 6vw, 80px);
  padding-bottom: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--line);
}
.ab-say p {
  margin-top: 14px;
  max-width: 520px;
  font-size: clamp(0.95rem, 1.1vw, 1.02rem);
  line-height: 1.7;
}
.ab-say-links {
  margin-top: clamp(38px, 4.4vw, 58px);
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 0.95rem;
}
.ab-say-links a {
  display: inline-block;
  color: var(--ink);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  transform-origin: center bottom;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
              scale 0.32s var(--spring), translate 0.32s var(--spring);
}
.ab-say-links a:hover {
  color: var(--taupe);
  border-bottom-color: var(--taupe);
  scale: 1.1;
  translate: 0 -2px;
}
/* a quick press, shorter than the release so it reads as tactile */
.ab-say-links a:active {
  scale: 0.95;
  translate: 0 0;
  transition-duration: 0.09s;
}

/* the wand doodle sits here rather than in the collage, so it is never
   duplicated: the cursor is the only other wand on the page */
.ab-wand {
  position: absolute;
  /* up in the margin beside the heading's first word. max() keeps it on the
     page once the gutter narrows, where it would otherwise hang off the left.
     The top offset keeps it clear of the section's rule. */
  top: clamp(22px, 2.4vw, 32px);
  left: max(4px, calc(var(--gutter) - 62px));
  width: clamp(28px, 3.2vw, 40px);
  display: block;
  opacity: 0.85;
  cursor: pointer;
  /* the bob owns `translate` and the shake owns `rotate`, so the two layer
     instead of overwriting each other the way one combined keyframe would */
  rotate: 18deg;
  animation: wand-bob 6s ease-in-out infinite;
}
.ab-wand img { width: 100%; height: auto; pointer-events: none; }
/* a zero-size marker on the star, so the burst can start from the real tip
   whatever the wand's current rotation is */
.ab-wand-tip { position: absolute; left: 50.8%; top: 22.5%; width: 0; height: 0; }
.ab-wand.shake { animation: wand-bob 6s ease-in-out infinite, wand-tip 0.7s var(--ease); }
@keyframes wand-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}
/* one tip to the side and back, so the sparkles pour off the star rather than
   the wand rattling in place */
@keyframes wand-tip {
  0%   { rotate: 18deg; }
  22%  { rotate: 44deg; }
  55%  { rotate: 38deg; }
  100% { rotate: 18deg; }
}

@media (max-width: 720px) {
  .ab-wand { position: static; width: 34px; margin: 0 0 14px; rotate: 14deg; }
}
@media (prefers-reduced-motion: reduce) {
  .love img, .ab-wand { animation: none; }
}

/* the closing block already leaves room; the footer's own lead-in is sized for
   the home page, where a carousel sits above it */
.about-body .site-footer { padding-top: clamp(48px, 6vw, 76px); }