/* Story page only. */

/* ---------- Profile ---------- */

#profile { padding: 120px var(--gutter) 60px; background: var(--chalk); }
#profile .profile__body { display: flex; gap: 56px; align-items: flex-start; }
#profile .profile__portrait {
  position: relative; flex: 0 0 380px; width: 380px; height: 500px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 0 16px 18px;
}
#profile .profile__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
#profile .profile__caption {
  position: relative; color: var(--chalk);
  font-size: 9px; font-weight: 500; letter-spacing: 1.62px; text-transform: uppercase;
}
#profile .facts { flex: 1 1 0; min-width: 0; }
#profile .fact {
  display: flex; gap: 32px; align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid var(--hedge);
}
#profile .fact:last-child { border-bottom: 1px solid var(--hedge); }
#profile .fact dt { flex: 0 0 150px; width: 150px; margin: 0; font-size: 10px; font-weight: 500; letter-spacing: 1.8px; }
#profile .fact dd { flex: 1 1 0; min-width: 0; margin: 0; font-size: 17px; line-height: 28px; font-weight: 300; }

/* ---------- Chapters ---------- */

#chapters { padding: 60px var(--gutter) 130px; background: var(--chalk); }
#chapters .chapter {
  display: flex; gap: 40px; align-items: flex-start;
  padding: 38px 0;
  border-top: 1px solid var(--hedge);
}
#chapters .chapter:last-child { border-bottom: 1px solid var(--hedge); }
#chapters .chapter__when { flex: 0 0 60px; width: 60px; font-size: 10px; font-weight: 500; letter-spacing: 0.8px; }
#chapters .chapter__when span { display: block; }
#chapters .chapter__name { flex: 0 0 320px; width: 320px; font-weight: 300; font-size: 26px; line-height: 36px; letter-spacing: -0.26px; }
#chapters .chapter__body { flex: 1 1 0; min-width: 0; font-size: 15px; line-height: 26px; font-weight: 300; }

/* ---------- Social ---------- */

#social { padding: 130px var(--gutter) 60px; background: var(--chalk); }
#social .social__handle {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  flex-wrap: wrap;
}
#social .social__at { font-weight: 300; font-size: 52px; letter-spacing: -1.04px; }
#social .social__count { font-size: 10px; font-weight: 500; letter-spacing: 1.8px; }
#social .social__blurb { margin-top: 34px; font-size: 18px; line-height: 30px; font-weight: 300; max-width: 760px; }
#social .social__grid { display: flex; gap: 10px; margin-top: 34px; }
#social .social__post {
  position: relative; flex: 1 1 0; min-width: 0; height: 410px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 0 16px 18px;
}
#social .social__post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#social .social__tag { position: relative; color: var(--chalk); font-size: 9px; font-weight: 500; letter-spacing: 1.62px; }
#social .social__ctas { display: flex; gap: 48px; flex-wrap: wrap; margin-top: 34px; }
#social .cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  width: 260px; height: 62px; padding: 0 28px;
  background: var(--funky); color: var(--chalk);
  border-radius: 32px;
  font-size: 11px; font-weight: 500; letter-spacing: 1.54px;
  transition: background-color 160ms ease,
              opacity 760ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
#social .cta:hover { background-color: #7A2E02; }

/* ---------- Responsive ---------- */

/* The profile row needs the 280 label, a 380 portrait, a 56 gap and a facts
   column that still has room for a 150px term plus its value. That only fits
   above roughly 1520, so below it the row stacks rather than crushing the
   facts to nothing. Same for the chapter rows. */
@media (max-width: 1520px) {
  #profile .profile__body { flex-direction: column; gap: 36px; }
  #profile .profile__portrait { flex: none; width: 100%; max-width: 560px; height: 460px; }
  #chapters .chapter { flex-wrap: wrap; gap: 14px 32px; }
  #chapters .chapter__name { flex: 1 1 auto; width: auto; }
  #chapters .chapter__body { flex: 1 1 100%; }
}

@media (max-width: 1400px) {
  #social .social__at { font-size: 38px; }
  #chapters .chapter__name { font-size: 22px; line-height: 30px; }
}

@media (max-width: 1100px) {
  #profile { padding-top: 72px; }
  #profile .profile__portrait { max-width: none; height: 420px; }
  #chapters { padding-bottom: 80px; }
  #social { padding-top: 80px; }
  #social .social__grid { flex-wrap: wrap; }
  #social .social__post { flex: 1 1 46%; height: 300px; }
}

@media (max-width: 620px) {
  #profile .fact { flex-direction: column; gap: 8px; }
  #profile .fact dt { flex: none; width: auto; }
  #profile .fact dd { font-size: 16px; line-height: 26px; }
  #chapters .chapter__name { font-size: 20px; line-height: 28px; }
  #social .social__at { font-size: 29px; }
  /* Reels are vertical, so the cards are too, two to a row. */
  #social .social__grid { gap: 8px; }
  /* 2:3 rather than 9:16, which is the shape most of the covers are, so they
     sit in the card without being cut. */
  #social .social__post { flex: 1 1 calc(50% - 4px); height: auto; aspect-ratio: 2 / 3; }
  #social .social__ctas { gap: 14px; }
  #social .cta { width: 100%; }
}

/* Same shrink to fit problem on the portrait, which left it inset on the left
   and running off the right edge of a phone. */
@media (max-width: 1100px) {
  #profile .profile__body { align-items: stretch; }
  #profile .profile__portrait {
    /* figure carries a UA margin of 1em 40px, which pushed it off the right
       edge of a phone. Reset here only, desktop keeps the design as drawn. */
    margin: 0;
    flex: none; width: 100%; height: auto; aspect-ratio: 4 / 5;
  }
}

/* The four posts are the reels themselves, so each one opens the real thing and
   carries a play badge rather than reading as a photograph. */
#social a.social__post {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* the tag sits on the image, so it needs to hold on a light cover too */
#social a.social__post .social__tag { text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
#social a.social__post img { transition: transform 900ms cubic-bezier(0.22,0.61,0.36,1); }
#social a.social__post:hover img { transform: scale(1.03); }
#social .social__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(239,234,225,0.9);
  transition: transform 260ms cubic-bezier(0.22,0.61,0.36,1), background-color 200ms ease;
}
#social a.social__post:hover .social__play { transform: translate(-50%,-50%) scale(1.08); background: var(--chalk); }
#social .social__play::after {
  content: ""; margin-left: 4px;
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--field);
}

/* That reel was posted as a 4:3 video, so a vertical crop cuts the frame in
   half. This card shows the whole frame on the dark ground instead. */
#social .social__post--wide { background: var(--field); }
#social .social__post--wide img { object-fit: contain; }