/* ==========================================================
   ABOUT (v2) — laid out to the sketch: name across the top with the
   nav opposite it, a narrow copy column on the left, the charm large
   on the right, a client-logo row beneath, and a pink "Lets talk"
   panel filling the bottom.

   Loaded after style.css.
   ========================================================== */

body.about2-page{
  /* colour comes from the palette in style.css — nothing is defined here */
  --bg: var(--white);
  --bg-soft: #f0f0f0;
  --bg-soft: color-mix(in srgb, var(--grey) 22%, var(--white));
  --fg: var(--black);
  --fg-dim: #6f6f6f;
  --fg-dim: color-mix(in srgb, var(--black) 72%, var(--white));
  --line: #d7d7d7;
  --line: color-mix(in srgb, var(--grey) 60%, var(--white));
  --hl: var(--pink);
  /* the charm's dot cloud, read by js/about-hero.js */
  --charm-dot: var(--pink);
  --pad-x: clamp(18px, 3vw, 44px);
  /* identical to --card-ease / --card-push-duration on the showcase page,
     so the Lets talk panel answers the cursor exactly like the project
     cards there do */
  --hover-ease: cubic-bezier(.19, 1.02, .28, 1);
  --hover-duration: 1.15s;
  background: var(--bg);
  color: var(--fg);
}

/* this page carries its own masthead, so the shared fixed header, social
   dock and floating CTA aren't in the markup — nothing to override */

.ab-wrap{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad-x);
  overflow-x: hidden;
}

/* ---------- masthead ----------
   Name left, nav right. Flex rather than the showcase page's three-column
   grid, since the middle column's text has been removed. */
.ab-masthead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
  padding: clamp(22px, 3.4vh, 34px) 0 0;
}
.ab-name{
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(17px, 2.5vw, 42px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  transition: color .35s ease;
}
.ab-name:hover{ color: var(--hl); }

.ab-nav{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.ab-nav a{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color .3s ease;
}
.ab-nav a:hover,
.ab-nav a[aria-current="page"]{ color: var(--fg); }

/* ---------- copy + charm ---------- */
.ab-middle{
  position: relative;
  flex: 1;
  display: grid;
  /* narrow measure on the left, as sketched; the charm sits in the
     right-hand column */
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 5vw, 80px);
  padding: clamp(28px, 5vh, 58px) 0 0;
}

/* set exactly like the masthead excerpt above it — same size, leading and
   tone, so the two blocks read as one voice */
/* left column: copy with the logo banner stacked beneath it. Both therefore
   share the column's width, which is what makes the banner exactly as wide
   as the text box above it. */
.ab-left{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ab-copy p{
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-dim);
}
.ab-copy p + p{ margin-top: 12px; }

/* ---------- 3D charm ----------
   The rotating cast of dot-cloud charms from the about page
   (js/about-hero.js): idles slowly, and clicking winds it up into a fast
   spin that swaps to another charm at peak speed. The renderer sizes
   itself from this box's computed dimensions, so it needs a real width
   and height rather than relying on the canvas to stretch. */
.ab-charm{
  /* centred in its own column rather than pushed to the right edge, so it
     sits in the middle of the open space beside the copy */
  justify-self: center;
  align-self: center;
  width: clamp(210px, 26vw, 380px);
  aspect-ratio: 1;
  margin-top: clamp(0px, 3vh, 30px);
}
.ab-charm{ position: relative; }
.ab-charm canvas{
  width: 100%;
  height: 100%;
  display: block;
}
/* static stand-in, revealed by about-hero.js only if the GLBs fail */
.ab-charm img[data-charm-fallback]{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- client logos: panning marquee ----------
   Lives inside .ab-left, directly below the copy, so its width is the copy
   column's width — no max-width needed here, the grid column defines it. */
.ab-logos{
  position: relative;
  overflow: hidden;
  margin-top: clamp(22px, 4vh, 44px);
}

/* soft fades so logos dissolve at the edges instead of being cut off.
   Narrower than before, since the banner itself is now much narrower — a
   90px fade on each side of a 400px strip would eat half the row. */
.ab-logos::before,
.ab-logos::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(18px, 3vw, 34px);
  z-index: 2;
  pointer-events: none;
}
.ab-logos::before{
  left: 0;
  background: linear-gradient(to right, var(--bg) 10%, color-mix(in srgb, var(--bg) 0%, transparent) 100%);
}
.ab-logos::after{
  right: 0;
  background: linear-gradient(to left, var(--bg) 10%, color-mix(in srgb, var(--bg) 0%, transparent) 100%);
}

.ab-logos-track{
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
  width: max-content;
  /* the track holds two identical sets, so sliding exactly -50% lands the
     second set precisely where the first began — the loop is seamless */
  animation: abLogoPan 34s linear infinite;
  /* Promote this to its own compositor layer. Without it the marquee shares
     the main thread, and the 3D charm's render loop — especially during a
     click-spin — starves it, so the row visibly stalls. translate3d in the
     keyframes below forces the same promotion in browsers that ignore
     will-change on its own. */
  will-change: transform;
}
.ab-logos:hover .ab-logos-track{ animation-play-state: paused; }

@keyframes abLogoPan{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce){
  .ab-logos-track{ animation: none; }
}

/* Fixed box per logo, image contained inside it.
   The images referenced are the trimmed copies in client_logos/trimmed/.
   That matters more than the box: the original exports carry wildly
   different amounts of transparent padding — Elena Nancu's artwork filled
   only 9% of its canvas height while Whizbangs filled 88% — so object-fit
   was faithfully scaling the empty canvas, not the logo, and they came out
   at completely different visual sizes. Cropping each file to its actual
   content is what makes them match. */
.ab-logo{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(16px, 2.1vh, 22px);
  width: clamp(50px, 5.4vw, 74px);
}
.ab-logo img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* logos arrive in assorted colours; flattening them to one tone keeps the
     row reading as a single line rather than a pile of competing brands */
  filter: grayscale(1) brightness(0) opacity(.55);
  transition: filter .35s ease;
}
.ab-logo:hover img{
  filter: grayscale(1) brightness(0) opacity(1);
}

/* wordmark stand-in for a client with no logo file yet — set to sit at the
   same weight as the real marks around it */
.ab-logo--text{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(11px, 1.15vw, 14px);
  letter-spacing: -.025em;
  color: color-mix(in srgb, var(--black) 55%, transparent);
  white-space: nowrap;
  transition: color .35s ease;
}
.ab-logo--text:hover{ color: var(--black); }

/* ---------- scroll cue toward the contact panel ---------- */
.ab-scroll-cue{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin: clamp(26px, 5vh, 52px) auto clamp(18px, 3vh, 30px);
  color: var(--fg-dim);
  transition: color .3s ease;
}
.ab-scroll-cue:hover{ color: var(--hl); }
.ab-scroll-cue .label{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ab-scroll-cue .arrow{
  font-size: 15px;
  line-height: 1;
  /* drifts down and fades, like something falling away — reads as
     "keep going" without needing an instruction */
  animation: abScrollHint 1.9s var(--ease) infinite;
}
@keyframes abScrollHint{
  0%   { transform: translateY(-3px); opacity: .25; }
  45%  { transform: translateY(4px);  opacity: 1; }
  100% { transform: translateY(9px);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .ab-scroll-cue .arrow{ animation: none; opacity: .8; }
}

/* ---------- lets talk panel ---------- */
.ab-talk{
  /* local overrides so everything inside reads dark — the pink is bright,
     so dark type sits on it far better than white would */
  --fg: var(--black);
  --fg-dim: color-mix(in srgb, var(--black) 72%, transparent);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
  min-height: clamp(180px, 26vh, 260px);
  margin-bottom: clamp(16px, 3vh, 28px);
  padding: clamp(24px, 4vh, 44px) clamp(20px, 3vw, 40px);
  background: var(--hl);
  border-radius: 20px;
  color: var(--fg);
  /* Deliberately not a hover target. It used to scale on hover like the
     homepage cards, but it contains several independent links — a single
     panel-wide response made it read as one big button and fought with the
     individual link states inside it. The card and links below carry the
     hover instead. */
}

.ab-talk-main{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 3vh, 32px);
}

/* contact details sitting under the headline */
.ab-talk-info{
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ab-talk-info > div{
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.ab-talk-info dt{
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.ab-talk-info dd{ font-size: 12.5px; }
.ab-talk-info dd a{
  border-bottom: 1px solid color-mix(in srgb, var(--black) 35%, transparent);
  padding-bottom: 1px;
  transition: border-color .3s ease;
}
.ab-talk-info dd a:hover{ border-color: var(--black); }

/* ---------- social links, on their own card ---------- */
.ab-social-card{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: clamp(150px, 16vw, 200px);
  padding: 14px 16px 15px;
  border-radius: 14px;
  /* cream against the pink, so it reads as a separate object rather than
     another region of the same panel */
  background: var(--bg);
  transform: translateY(0);
  transition: transform var(--hover-duration) var(--hover-ease),
              box-shadow var(--hover-duration) var(--hover-ease);
}
.ab-social-card:hover,
.ab-social-card:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--black) 45%, transparent);
}
.ab-social-card .label{
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--black) 45%, transparent);
  margin-bottom: 7px;
}
.ab-social-card a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 0;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--black) 72%, transparent);
  transition: color .25s ease;
}
.ab-social-card a span{
  font-size: 10px;
  opacity: .5;
  transition: transform .3s var(--ease), opacity .3s ease;
}
.ab-social-card a:hover{ color: var(--black); }
.ab-social-card a:hover span{
  transform: translate(2px, -2px);
  opacity: 1;
}

.ab-talk-cta{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  align-self: flex-start;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 62px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--fg);
}
.ab-talk-cta .arrow{
  font-size: .4em;
  transition: transform .4s var(--ease);
}
.ab-talk-cta:hover .arrow{ transform: translate(8px, -8px); }


/* ---------- responsive ---------- */
/* the role line under the name belongs to the phone masthead only */
.ab-role{ display: none; }
/* the DAS mark signing off the pink footer is phone-only too */
.ab-talk-mark{ display: none; }

@media (max-width: 780px){
  /* ==========================================================
     PHONE — white page, pink footer.

     The pink moved from the top of the page to the bottom. A contact panel
     is where a page ENDS: leading with it meant About opened by asking for
     something before it had said anything. Now the page introduces, talks,
     shows the charm, and closes with the ask.
     ========================================================== */

  /* the burger centres on the name's first line; menu.css reads this */
  body.about2-page{
    --name-top: clamp(18px, 3.4vh, 30px);
    /* The name is the largest thing on the page by a wide margin. It wraps
       to two or three lines at this size, which is the point: a stacked
       block of heavy uppercase carries far more presence than one line
       shrunk to fit beside the burger. */
    --name-line: clamp(30px, 10.5vw, 56px);
    --burger-top: calc(var(--name-top) + (var(--name-line) - 46px) / 2);
  }

  /* ---------- masthead ---------- */
  .ab-masthead{
    display: block;
    padding-top: var(--name-top);
    padding-bottom: 0;
    /* clear of the fixed burger opposite */
    padding-right: 58px;
  }
  .ab-name{
    white-space: normal;
    font-size: var(--name-line);
    line-height: 1;
    letter-spacing: -.035em;
  }
  .ab-role{
    display: block;
    margin-top: 8px;
    font-size: clamp(12.5px, 3.4vw, 15px);
    line-height: 1.3;
    /* --fg-dim, a black/white mix at 4.9:1. Raw --grey on white is 2.19:1
       and would not survive daylight. */
    color: var(--fg-dim);
  }

  /* ---------- copy, logos, charm ---------- */
  .ab-middle{
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 4.5vh, 42px);
    padding-top: clamp(26px, 5vh, 46px);
  }
  .ab-left{ display: contents; }
  /* Flush to the same gutter as everything else. The indent that used to be
     here stepped in on the left but stayed flush on the right, so the block
     read as mis-set rather than deliberate: every other element on the page
     starts on one line, and this one didn't.

     The hierarchy comes from weight instead, which is what keeps it from
     looking laid out: the copy is smaller and dimmer than the name and the
     contact panel, so it recedes without moving anywhere. */
  .ab-copy{
    order: 1;
    padding-left: 0;
    /* stops the measure running to a tiring line length on a wide phone */
    max-width: 40ch;
  }
  .ab-copy p{
    font-size: clamp(12.5px, 3.4vw, 15px);
    line-height: 1.5;
    /* --fg-dim is a black/white mix at 4.9:1, so it reads as quiet without
       dropping below the threshold the way raw --grey would */
    color: var(--fg-dim);
  }
  /* The last paragraph says he is open to freelance work, which the panel
     below already states under Status. On a phone the two sit close enough
     together to read as a repeat, so the copy keeps the two that carry
     something the footer doesn't. */
  .ab-copy p:last-child{ display: none; }
  .ab-logos{ order: 2; margin-top: 0; }
  .ab-charm{
    order: 3;
    align-self: center;
    width: min(74vw, 340px);
    margin-top: 0;
  }

  /* ---------- pink footer ----------
     Full bleed via negative side margins against .ab-wrap's padding, so the
     colour runs to both screen edges while its contents stay on the gutter. */
  .ab-talk{
    display: block;
    position: relative;
    margin: clamp(28px, 5vh, 50px) calc(var(--pad-x) * -1) 0;
    padding: clamp(24px, 4.5vh, 40px) var(--pad-x) clamp(26px, 5vh, 44px);
    background: var(--pink);
  }
  .ab-talk-main{ display: block; }
  .ab-talk-cta{
    display: block;
    font-size: clamp(34px, 11.5vw, 62px);
    line-height: .95;
    color: var(--white);
  }
  /* the arrow belongs to the desktop panel's hover */
  .ab-talk-cta .arrow{ display: none; }

  /* Labels off: on a phone an address and a city say what they are, and the
     EMAIL / BASED / STATUS column was as wide as the values beside it. */
  .ab-talk-info{
    display: block;
    margin-top: 12px;
  }
  .ab-talk-info dt{ display: none; }
  .ab-talk-info div{ display: block; }
  /* Set a step ABOVE the body copy, not below it. These are the lines a
     visitor came for; the bio is background. */
  .ab-talk-info dd,
  .ab-talk-info dd a{
    margin: 0;
    font-size: clamp(14px, 4.1vw, 18px);
    line-height: 1.5;
    color: var(--white);
  }

  .ab-social-card{
    display: block;
    min-width: 0;
    margin-top: 14px;
    padding: 0;
    background: none;
    border: none;
  }
  .ab-social-card .label{ display: none; }
  .ab-social-card a{
    display: block;
    font-size: clamp(14px, 4.1vw, 18px);
    line-height: 1.5;
    color: var(--white);
  }
  .ab-social-card a span{ display: none; }

  /* The mark signing off the panel. The asset is solid white, so unlike the
     header logo it needs no invert here. Sized to clear the email address,
     which is the longest line it sits beside. */
  .ab-talk-mark{
    display: block;
    position: absolute;
    right: var(--pad-x);
    bottom: clamp(20px, 3.6vh, 36px);
    width: min(34vw, 140px);
    height: auto;
    pointer-events: none;
  }
}