/* About page. Loaded after styles.css and article.css; uses their tokens. */
.about-wrap { width: min(1060px, 100% - 32px); margin-inline: auto; }
.about-head { max-width: 760px; }
.about-head h1 { margin-top: 10px; }
.about-lede { margin-top: 18px; font-size: 19px; line-height: 1.5; color: var(--ink-muted); }
.about h2 { margin-top: 10px; }

.about-jenna { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 64px; }
.jenna-frame { position: relative; isolation: isolate; aspect-ratio: 16/9; border-radius: var(--r-xl); overflow: hidden; background: #191411; box-shadow: var(--shadow-float); }
.jenna-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.jenna-copy > p { margin-top: 14px; color: var(--ink-muted); }
.jenna-quote { margin: 26px 0 0; padding-left: 18px; box-shadow: inset 3px 0 0 var(--accent); }
.jenna-quote blockquote { margin: 0; font-size: clamp(19px, 2vw, 23px); line-height: 1.35; letter-spacing: -.015em; font-weight: 500; }
.jenna-quote figcaption { margin-top: 12px; display: grid; font-size: 15px; }
.jenna-quote figcaption span { color: var(--ink-muted); }

/* The poster card over Jenna's video: her avatar instead of the first frame. */
.jenna-cover { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; overflow: hidden; border: 0; cursor: pointer; color: var(--ink); text-align: left; background: #FFF8F2; transition: opacity .24s var(--ease), transform .24s var(--ease); }
.jenna-cover:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.jenna-cover::before { content: ""; position: absolute; width: 60%; height: 150%; right: -17%; top: -26%; border-radius: 48% 0 0 52%; background: #FDEEE4; transform: rotate(-5deg); transition: transform .35s var(--ease); }
.jenna-cover:hover::before { transform: rotate(-3deg) scale(1.035); }
.jenna-cover.is-starting { opacity: 0; transform: scale(1.015); pointer-events: none; }
.jenna-cover-copy { position: absolute; z-index: 2; left: clamp(20px, 5.5%, 34px); top: 50%; width: 58%; transform: translateY(-50%); display: grid; }
.jenna-cover-kicker { margin-bottom: 7px; color: var(--accent-tint-text); font-size: clamp(10px, 1.2vw, 12px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.jenna-cover-title { max-width: 310px; font-size: clamp(22px, 3vw, 34px); font-weight: 600; line-height: 1.03; letter-spacing: -.025em; }
.jenna-cover-summary { max-width: 270px; margin-top: 9px; color: var(--ink-muted); font-size: clamp(12px, 1.3vw, 15px); line-height: 1.35; }
.jenna-cover-cta { display: flex; align-items: center; gap: 9px; margin-top: clamp(12px, 2.6vw, 22px); font-size: clamp(11px, 1.3vw, 13.5px); font-weight: 600; }
.jenna-cover-play { position: relative; display: grid; flex: none; width: clamp(32px, 5vw, 42px); height: clamp(32px, 5vw, 42px); place-items: center; border-radius: 50%; background: var(--accent); box-shadow: 0 12px 28px -10px rgba(244,83,10,.7); }
.jenna-cover-play::after { content: ""; margin-left: 3px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #fff; }
.jenna-cover-duration { padding-left: 9px; border-left: 1px solid #DED6CB; color: var(--ink-muted); font-weight: 500; }
.jenna-cover-character { position: absolute; z-index: 1; top: 5%; right: 7%; width: auto; max-width: none; height: 164%; filter: drop-shadow(0 18px 20px rgba(89,54,33,.12)); transition: transform .35s var(--ease); }
.jenna-cover:hover .jenna-cover-character { transform: translateY(-1.5%); }

.about-story { max-width: 760px; margin-top: 72px; }
.about-story p { margin-top: 16px; }
.about-tour { margin-top: 80px; text-align: center; }
.about-tour .eyebrow { justify-content: center; }
.about-tour .tour-frame { margin-top: 32px; }
.about .article-cta { max-width: none; text-align: center; }

@media (max-width: 860px) {
  .about-jenna { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
}
@media (max-width: 600px) {
  .jenna-cover-copy { left: 18px; width: 62%; }
  .jenna-cover-character { right: 4%; height: 152%; }
}