:root {
      --white: #FFFFFF;
      --fog: #F4F4F7;
      --ink: #0C0C0F;
      --ink-2: #3A3A44;
      --ink-3: #5C5C68;
      --line: rgba(12, 12, 15, .11);
      --line-soft: rgba(12, 12, 15, .07);
      --lilac: #C8B5FF;
      --lilac-soft: #ECE6FF;
      --violet: #3B22A8;
      --on-ink-2: #A9A9B5;
      --line-ink: rgba(255, 255, 255, .12);
      --sans: 'Manrope', system-ui, -apple-system, sans-serif;
      --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
      --display: 'Playfair Display', 'Cormorant Garamond', 'Bodoni Moda', Georgia, serif;
      --gutter: clamp(20px, 4.5vw, 64px);
      --ease-out: cubic-bezier(.16, 1, .3, 1);
      color-scheme: light;
    }

    * {
      box-sizing: border-box
    }

    [hidden] {
      display: none !important
    }

    html,
    body {
      overflow-x: clip
    }

    body {
      margin: 0;
      background: var(--white);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 1.0625rem;
      line-height: 1.68;
      font-weight: 400;
      -webkit-font-smoothing: antialiased
    }

    ::selection {
      background: var(--lilac);
      color: var(--ink)
    }

    img {
      max-width: 100%;
      display: block
    }

    a {
      color: inherit
    }

    p {
      margin: 0
    }

    .profile-copy a,
    .book-copy a,
    .mv-copy a {
      text-decoration: underline;
      text-underline-offset: 4px;
      color: var(--violet)
    }

    h1,
    h2,
    h3,
    h4 {
      margin: 0;
      font-weight: 400;
      text-wrap: balance
    }

    ul,
    ol {
      margin: 0;
      padding: 0;
      list-style: none
    }

    button {
      font: inherit;
      color: inherit
    }

    :focus-visible {
      outline: 2px solid var(--violet);
      outline-offset: 3px
    }

    .bg-ink :focus-visible {
      outline-color: var(--lilac)
    }

    .wrap {
      max-width: 1320px;
      margin-inline: auto;
      padding-inline: var(--gutter)
    }

    .band {
      padding-block: clamp(64px, 7.5vw, 112px)
    }

    .bg-ink {
      background: var(--ink);
      color: var(--white)
    }

    .bg-fog {
      background: var(--fog)
    }

    .bg-lilac {
      background: var(--lilac)
    }

    /* type */
    .label {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink-2);
      font-family: var(--sans)
    }

    .bg-ink .label {
      color: var(--lilac)
    }

    .h2 {
      font-family: var(--serif);
      font-size: clamp(2.4rem, 4.8vw, 4.2rem);
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: -.02em;
      font-optical-sizing: auto
    }

    .h2 em,
    .h1 em {
      font-style: italic;
      font-weight: 500;
      color: var(--violet)
    }

    .bg-ink .h2 em {
      color: var(--lilac)
    }

    .bg-lilac .h2 em {
      color: var(--ink)
    }

    .lead {
      font-size: clamp(1.1rem, 1.4vw, 1.26rem);
      line-height: 1.68;
      color: var(--ink-2);
      max-width: 58ch;
      font-weight: 400
    }

    .bg-ink .lead {
      color: var(--on-ink-2)
    }

    .head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
      gap: 24px 64px;
      align-items: end;
      margin-bottom: clamp(48px, 6vw, 76px);
      padding-bottom: clamp(20px, 2.5vw, 28px);
      border-bottom: 1px solid var(--line)
    }

    .head>div {
      display: grid;
      gap: 16px
    }

    .plain {
      font-size: .9rem;
      line-height: 1.55;
      color: var(--ink-2);
      border-left: 2px solid var(--lilac);
      padding-left: 14px
    }

    .plain b {
      color: var(--ink);
      font-weight: 600
    }

    .bg-ink .plain {
      color: var(--on-ink-2)
    }

    .bg-ink .plain b {
      color: var(--white)
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 16px 28px;
      font-size: .76rem;
      font-weight: 600;
      letter-spacing: .13em;
      text-transform: uppercase;
      font-variation-settings: 'wdth' 110;
      text-decoration: none;
      border: 1.5px solid transparent;
      border-radius: 10px;
      cursor: pointer;
      background: none;
      transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .15s ease, box-shadow .22s ease
    }

    .btn:active {
      transform: scale(0.98)
    }

    .btn:hover {
      box-shadow: 0 6px 20px -4px rgba(12, 12, 15, .12)
    }

    .btn .arr {
      display: inline-block;
      transition: transform .22s ease
    }

    .btn:hover .arr {
      transform: translateX(5px)
    }

    .btn-ink {
      background: var(--ink);
      color: var(--white);
      border-radius: 10px
    }

    .btn-ink:hover {
      background: var(--violet)
    }

    .btn-lilac {
      background: var(--lilac);
      color: var(--ink);
      border-radius: 10px
    }

    .btn-lilac:hover {
      background: var(--white)
    }

    .btn-line {
      border-color: var(--ink);
      color: var(--ink);
      border-radius: 10px
    }

    .btn-line:hover {
      background: var(--ink);
      color: var(--white)
    }

    .btn-line-w {
      border-color: rgba(255, 255, 255, .6);
      color: var(--white);
      border-radius: 10px
    }

    .btn-line-w:hover {
      background: var(--white);
      color: var(--ink)
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px
    }

    .chip {
      border: 1.5px solid var(--line);
      background: var(--white);
      padding: 9px 16px;
      font-size: .84rem;
      font-weight: 500;
      cursor: pointer;
      border-radius: 999px;
      transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease
    }

    .chip:hover {
      border-color: var(--ink);
      box-shadow: 0 4px 12px -3px rgba(12, 12, 15, .08)
    }

    .chip[aria-pressed="true"] {
      background: var(--ink);
      border-color: var(--ink);
      color: var(--white)
    }

    /* image slots — contemporary floating frames */
    .ph {
      position: relative;
      margin: 0;
      width: 100%;
      max-width: 100%;
      aspect-ratio: var(--ar, 4/5);
      overflow: hidden;
      background: linear-gradient(145deg, #F7F6FA 0%, #E8E4F2 50%, #D4CFE3 100%);
      border-radius: 3px 3px 32px 3px;
      border: 1px solid rgba(12, 12, 15, .08);
      outline: 1px solid rgba(200, 181, 255, .35);
      outline-offset: 5px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 40px -18px rgba(12, 12, 15, .22), 0 4px 14px -4px rgba(59, 34, 168, .12);
      transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-radius .5s var(--ease-out), outline-color .5s var(--ease-out), outline-offset .5s var(--ease-out)
    }

    .ph:hover {
      transform: translateY(-6px);
      border-radius: 32px 3px 3px 32px;
      outline-color: rgba(59, 34, 168, .28);
      outline-offset: 8px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 30px 56px -18px rgba(12, 12, 15, .26), 0 10px 24px -6px rgba(59, 34, 168, .16)
    }

    .ph.person::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 50%;
      height: 64%;
      transform: translateX(-50%);
      background: linear-gradient(180deg, rgba(12, 12, 15, .12), rgba(12, 12, 15, .26));
      border-radius: 48% 48% 0 0/26% 26% 0 0;
      z-index: 0
    }

    .ph.person::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 60%;
      width: 16%;
      aspect-ratio: 1;
      transform: translateX(-50%);
      background: rgba(12, 12, 15, .14);
      border-radius: 50%;
      z-index: 0
    }

    .ph.person:has(img)::before,
    .ph.person:has(img)::after {
      display: none
    }

    .ph.dark {
      background: linear-gradient(160deg, #2A2834 0%, #16151C 100%);
      border-color: rgba(200, 181, 255, .2);
      outline-color: rgba(200, 181, 255, .25);
      box-shadow: inset 0 1px 0 rgba(200, 181, 255, .14), 0 24px 48px -14px rgba(0, 0, 0, .55)
    }

    .ph.dark:hover {
      outline-color: rgba(200, 181, 255, .45);
      outline-offset: 8px;
      box-shadow: inset 0 1px 0 rgba(200, 181, 255, .22), 0 34px 60px -16px rgba(0, 0, 0, .68)
    }

    .ph picture {
      display: contents
    }

    .ph img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
      transition: transform .7s var(--ease-out)
    }

    .ph:hover img {
      transform: scale(1.045)
    }

    .ph figcaption {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      z-index: 3;
      display: grid;
      gap: 2px;
      font-size: .65rem;
      line-height: 1.35;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink);
      background: rgba(255, 255, 255, .92);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      padding: 10px 14px;
      border-radius: 2px 12px 2px 12px;
      border: 1px solid rgba(12, 12, 15, .06);
      box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .12)
    }

    .ph figcaption span {
      font-weight: 500;
      letter-spacing: .01em;
      text-transform: none;
      font-size: .76rem;
      color: var(--ink-2);
      font-family: var(--sans)
    }

    .ph.dark figcaption {
      color: var(--lilac);
      background: rgba(12, 12, 15, .88);
      border-color: rgba(200, 181, 255, .15)
    }

    .ph.dark figcaption span {
      color: var(--on-ink-2)
    }

    /* gallery thumbs — tighter outline so frames don’t collide */
    .gallery .ph {
      outline-offset: 3px
    }

    .gallery .ph:hover {
      outline-offset: 5px
    }

    .hero-media .ph,
    .profile-media .ph,
    .cover .ph,
    .reel .ph,
    .mv-media .ph {
      margin: 6px
    }

    /* ============ FLOATING ISLAND NAV ============ */
    .nav-outer {
      position: sticky;
      top: env(safe-area-inset-top, 0px);
      z-index: 70;
      padding: 14px clamp(12px, 3vw, 32px);
      pointer-events: none
    }

    .nav {
      position: relative;
      max-width: 1220px;
      margin-inline: auto;
      background: rgba(255, 255, 255, .86);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(12, 12, 15, .09);
      border-radius: 999px;
      box-shadow: 0 16px 36px -12px rgba(12, 12, 15, .08);
      transition: box-shadow .3s ease, background-color .3s ease, transform .3s ease;
      pointer-events: auto
    }

    .nav.scrolled {
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 20px 40px -10px rgba(12, 12, 15, .12)
    }

    .nav-in {
      display: flex;
      align-items: center;
      gap: clamp(14px, 2vw, 32px);
      padding: 8px 12px 8px 24px;
      min-height: 58px
    }

    .wordmark {
      font-family: var(--display);
      font-size: clamp(1.68rem, 2.15vw, 2.08rem);
      font-weight: 800;
      font-style: italic;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      letter-spacing: -.015em;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--ink);
      transition: transform .25s var(--ease-out), color .2s ease
    }

    .wordmark:hover {
      transform: scale(1.02);
      color: var(--violet)
    }

    .wordmark i {
      font-family: var(--display);
      color: var(--violet);
      font-style: italic;
      font-weight: 800;
      letter-spacing: -.01em;
      transition: color .2s ease
    }

    .wordmark:hover i {
      color: var(--ink)
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
      position: relative
    }

    .nav-links a {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 600;
      text-decoration: none;
      color: var(--ink-2);
      transition: color .2s ease, background-color .2s ease;
      font-variant-numeric: tabular-nums
    }

    .nav-links a:hover,
    .nav-links a.active {
      color: var(--ink);
      background: rgba(12, 12, 15, .05)
    }

    .nav-links a.active {
      background: var(--lilac-soft);
      color: var(--violet)
    }

    .nav .btn {
      padding: 10px 20px;
      font-size: .7rem;
      border-radius: 999px
    }

    .menu-btn {
      display: none;
      margin-left: auto;
      background: none;
      border: 1.5px solid var(--ink);
      border-radius: 999px;
      padding: 10px 18px;
      min-height: 44px;
      min-width: 44px;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      cursor: pointer
    }

    .readline {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 0;
      height: 2.5px;
      background: linear-gradient(90deg, var(--violet), var(--lilac));
      border-radius: 999px;
      transform: scaleX(0);
      transform-origin: left;
      box-shadow: 0 0 10px rgba(200, 181, 255, .8);
      transition: transform .08s linear
    }

    .mobile-menu {
      position: absolute;
      top: calc(100% + 10px);
      left: 12px;
      right: 12px;
      background: rgba(255, 255, 255, .96);
      -webkit-backdrop-filter: blur(24px);
      backdrop-filter: blur(24px);
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: 0 24px 48px -12px rgba(12, 12, 15, .16);
      overflow: hidden
    }

    .mobile-menu ul {
      display: grid;
      padding: 16px 24px 24px
    }

    .mobile-menu a {
      display: block;
      padding: 14px 0;
      font-family: var(--serif);
      font-size: 1.6rem;
      text-decoration: none;
      border-bottom: 1px solid rgba(12, 12, 15, .06)
    }

    .mobile-menu .btn {
      margin-top: 16px;
      font-family: var(--sans);
      font-size: .8rem;
      border-radius: 999px
    }

    /* ============ HERO ============ */
    .hero {
      padding-block: clamp(48px, 6vw, 80px) clamp(40px, 5vw, 72px)
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
      gap: clamp(32px, 5.5vw, 88px);
      align-items: center
    }

    .hero-copy {
      display: grid;
      gap: 28px
    }

    .hero-name {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 18px
    }

    .hero-name .label {
      color: var(--ink);
      font-weight: 700
    }

    .hero-name .sep {
      width: 28px;
      height: 1px;
      background: var(--ink-3)
    }

    .h1 {
      font-family: var(--serif);
      font-size: clamp(2.35rem, 7.5vw, 6.8rem);
      font-weight: 600;
      line-height: .96;
      letter-spacing: -.025em
    }

    .hero-sub {
      font-family: var(--sans);
      font-size: clamp(1.12rem, 1.65vw, 1.38rem);
      line-height: 1.62;
      color: var(--ink-2);
      max-width: 34ch;
      font-weight: 400
    }

    .method-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      padding-block: 18px;
      border-block: 1px solid var(--line);
      position: relative
    }

    .method-line::before {
      content: "";
      position: absolute;
      left: 0;
      top: -1px;
      width: 48px;
      height: 2px;
      background: var(--violet)
    }

    .method-line span {
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-3);
      transition: color .4s ease
    }

    .method-line span.on {
      color: var(--ink)
    }

    .method-line i {
      font-style: normal;
      color: var(--ink-3);
      font-size: .9rem
    }

    .method-line span.on+i {
      color: var(--violet)
    }

    .hero-media {
      position: relative
    }

    .hero-media .ph {
      --ar: 4/5
    }

    /* Next on stage — calm bar under hero (not over photo) */
    .stage-bar {
      display: block;
      text-decoration: none;
      background: var(--white);
      border-bottom: 1px solid var(--line);
      border-top: 1px solid var(--line);
      box-shadow: inset 3px 0 0 var(--violet);
      transition: background-color .25s ease
    }

    .stage-bar:hover {
      background: var(--lilac-soft)
    }

    .stage-bar-in {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 22px;
      padding-block: 16px
    }

    .stage-bar .label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--violet);
      margin: 0
    }

    .stage-bar strong {
      font-family: var(--serif);
      font-weight: 600;
      font-size: 1.15rem;
      line-height: 1.2;
      color: var(--ink)
    }

    .stage-bar .s {
      font-size: .88rem;
      color: var(--ink-2);
      flex: 1 1 220px;
      min-width: 0
    }

    .stage-bar .go {
      margin-left: auto;
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--violet)
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--violet);
      flex-shrink: 0
    }

    @media (prefers-reduced-motion:no-preference) {
      .dot {
        animation: pulse 2.2s ease-out infinite
      }

      @keyframes pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(59, 34, 168, .4)
        }

        80%,
        100% {
          box-shadow: 0 0 0 10px rgba(59, 34, 168, 0)
        }
      }
    }

    .creds {
      background: var(--fog);
      padding-block: 16px 18px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      overflow: hidden
    }

    .creds-in {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 12px
    }

    .creds .label {
      flex: 0 0 auto;
      position: relative;
      padding-right: 16px
    }

    .creds .label::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      width: 1px;
      height: 14px;
      transform: translateY(-50%);
      background: var(--line)
    }

    .creds-marquee {
      position: relative;
      mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%)
    }

    .creds-track {
      display: flex;
      width: max-content;
      gap: 0;
      animation: creds-scroll 36s linear infinite;
      will-change: transform
    }

    .creds-marquee:hover .creds-track {
      animation-play-state: paused
    }

    @keyframes creds-scroll {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    .creds-list {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      list-style: none;
      margin: 0;
      padding: 0 6px
    }

    .creds-list li {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 8px 18px;
      border: 1px solid rgba(12, 12, 15, .1);
      background: rgba(255, 255, 255, .72);
      border-radius: 2px;
      white-space: nowrap;
      font-family: var(--sans);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink);
      transition: border-color .2s ease, color .2s ease, background-color .2s ease
    }

    .creds-list li:hover {
      border-color: var(--violet);
      color: var(--violet);
      background: var(--white)
    }

    @media (prefers-reduced-motion:reduce) {
      .creds-track {
        animation: none;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        gap: 10px
      }

      .creds-list:last-child {
        display: none
      }

      .creds-marquee {
        mask-image: none;
        -webkit-mask-image: none
      }
    }

    /* ============ TWO KINDS OF DECISIONS ============ */
    .intro-quote {
      font-family: var(--serif);
      font-size: clamp(2.15rem, 4.2vw, 3.7rem);
      font-weight: 600;
      line-height: 1.08;
      letter-spacing: -.018em;
      max-width: 24ch
    }

    .intro-quote em {
      color: var(--violet);
      font-style: italic;
      font-weight: 500
    }

    .intro-by {
      margin-top: 20px;
      display: inline-flex;
      align-items: center;
      gap: 12px
    }

    .intro-by::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--violet)
    }

    .two article {
      background: transparent;
      padding: clamp(28px, 3.5vw, 44px) 0;
      display: grid;
      gap: 22px;
      align-content: start;
      border-radius: 0;
      border: 0;
      border-top: 1px solid var(--line);
      transition: border-color .3s ease
    }

    .two article:hover {
      border-top-color: var(--violet)
    }

    .two {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px 64px;
      margin-top: clamp(44px, 5.5vw, 72px)
    }

    .two .kind {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line)
    }

    .two h3 {
      font-family: var(--serif);
      font-size: clamp(1.9rem, 3vw, 2.65rem);
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: -.015em
    }

    .two p {
      color: var(--ink-2);
      max-width: 52ch
    }

    .two blockquote {
      margin: 0;
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(1.35rem, 2.1vw, 1.7rem);
      line-height: 1.24;
      color: var(--ink)
    }

    .two .more {
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      text-decoration: none;
      color: var(--violet);
      display: inline-flex;
      align-items: center;
      gap: 10px
    }

    .two .more:hover .arr {
      transform: translateX(5px)
    }

    .two .arr {
      transition: transform .2s ease
    }

    /* ============ MACRO / MICRO ============ */
    .macro-grid {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: clamp(36px, 6vw, 100px);
      align-items: center
    }

    .macro-copy {
      display: grid;
      gap: 26px
    }

    .macro-copy blockquote {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(1.55rem, 2.4vw, 2.1rem);
      font-weight: 600;
      line-height: 1.24;
      color: var(--white);
      padding-left: 20px;
      border-left: 3px solid var(--lilac)
    }

    .levels {
      display: grid;
      gap: 10px;
      justify-items: center
    }

    .level {
      width: var(--w);
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 6px 18px;
      align-items: baseline;
      text-align: left;
      padding: 18px 24px;
      background: #17171C;
      border: 1px solid var(--line-ink);
      color: var(--white);
      cursor: pointer;
      border-radius: 14px;
      transition: all .25s ease
    }

    .level:hover {
      border-color: var(--lilac);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .4)
    }

    .level .n {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .16em;
      color: var(--on-ink-2);
      font-variant-numeric: tabular-nums
    }

    .level b {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(1.3rem, 2vw, 1.65rem);
      line-height: 1.08
    }

    .level small {
      grid-column: 2;
      font-size: .84rem;
      color: var(--on-ink-2);
      line-height: 1.4
    }

    .level[aria-pressed="true"] {
      background: var(--lilac);
      border-color: var(--lilac);
      color: var(--ink);
      box-shadow: 0 12px 28px -6px rgba(200, 181, 255, .35)
    }

    .level[aria-pressed="true"] .n,
    .level[aria-pressed="true"] small {
      color: var(--ink-2)
    }

    .chain {
      margin-top: 20px;
      width: 100%;
      border-radius: 14px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid var(--line-ink);
      padding: 20px 24px;
      display: grid;
      gap: 8px
    }

    .chain p {
      font-size: 1.02rem;
      color: #D6D6DE;
      min-height: 3em;
      line-height: 1.55
    }

    .chain p b {
      color: var(--lilac);
      font-weight: 600
    }

    /* ============ PROFILE ============ */
    .profile-grid {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
      gap: clamp(36px, 6vw, 100px);
      align-items: start
    }

    .profile-media {
      position: sticky;
      top: 100px;
      display: grid;
      gap: 14px
    }

    .profile-media .ph {
      --ar: 3/4
    }

    .profile-copy {
      display: grid;
      gap: 24px
    }

    .profile-copy>p {
      color: var(--ink-2);
      max-width: 60ch
    }

    .profile-copy>p.first {
      font-size: clamp(1.18rem, 1.55vw, 1.35rem);
      line-height: 1.62;
      color: var(--ink);
      font-weight: 500
    }

    .facts {
      margin-top: 16px;
      border-top: 1px solid var(--ink)
    }

    .facts div {
      display: grid;
      grid-template-columns: 170px minmax(0, 1fr);
      gap: 20px;
      padding: 16px 4px;
      border-bottom: 1px solid var(--line);
      transition: background-color .2s ease, padding .2s ease
    }

    .facts div:hover {
      background: var(--fog);
      padding-left: 12px;
      padding-right: 12px
    }

    .facts dt {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink-3);
      padding-top: 2px
    }

    .facts dd {
      margin: 0;
      font-size: 1.02rem;
      color: var(--ink)
    }

    .facts dd i {
      font-family: var(--serif);
      font-size: 1.15em;
      font-weight: 600
    }

    /* ============ EXPERTISE ============ */
    .ex-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 14px
    }

    .ex-tab {
      background: none;
      border: 1px solid transparent;
      padding: 10px 18px;
      border-radius: 999px;
      cursor: pointer;
      text-align: left;
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all .22s ease
    }

    .ex-tab .n {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .14em;
      color: var(--ink-3)
    }

    .ex-tab .t {
      font-size: .96rem;
      font-weight: 600;
      color: var(--ink-2);
      transition: color .2s ease
    }

    .ex-tab:hover {
      background: rgba(12, 12, 15, .04);
      border-color: rgba(12, 12, 15, .08)
    }

    .ex-tab[aria-selected="true"] {
      background: var(--ink);
      border-color: var(--ink);
      box-shadow: 0 4px 14px rgba(12, 12, 15, .12)
    }

    .ex-tab[aria-selected="true"] .n {
      color: var(--lilac)
    }

    .ex-tab[aria-selected="true"] .t {
      color: var(--white)
    }

    .ex-tab::after {
      display: none
    }

    .ex-panel {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      gap: clamp(32px, 5.5vw, 84px);
      padding-top: clamp(36px, 4.5vw, 56px)
    }

    .ex-panel h3 {
      font-family: var(--serif);
      font-size: clamp(2.1rem, 3.4vw, 3.1rem);
      font-weight: 700;
      line-height: 1.04
    }

    .ex-panel .body {
      display: grid;
      gap: 20px;
      align-content: start
    }

    .ex-panel .body>p {
      color: var(--ink-2);
      max-width: 56ch
    }

    .qs {
      background: var(--ink);
      color: var(--white);
      padding: clamp(24px, 3.2vw, 40px);
      display: grid;
      gap: 4px;
      align-content: start;
      border-radius: 14px
    }

    .qs .label {
      margin-bottom: 10px;
      color: var(--lilac)
    }

    .qs li {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      padding: 14px 0;
      border-top: 1px solid var(--line-ink);
      font-family: var(--serif);
      font-size: clamp(1.2rem, 1.8vw, 1.5rem);
      line-height: 1.2
    }

    .qs li::before {
      content: "?";
      font-family: var(--sans);
      font-size: .8rem;
      font-weight: 700;
      color: var(--lilac);
      padding-top: .3em
    }

    @media (prefers-reduced-motion:no-preference) {

      .ex-panel:not([hidden]),
      .k-panel:not([hidden]),
      .m-detail:not([hidden]) {
        animation: fadeup .45s ease both
      }

      @keyframes fadeup {
        from {
          transform: translateY(10px)
        }

        to {
          transform: none
        }
      }
    }

    /* ============ SPEAKING ============ */
    .filters {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 34px
    }

    .filters .label {
      margin-right: 10px;
      font-weight: 700
    }

    .k-grid {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
      gap: clamp(36px, 6vw, 84px);
      align-items: start
    }

    .k-list {
      border-top: 1px solid var(--ink)
    }

    .k-item {
      display: grid;
      grid-template-columns: 40px minmax(0, 1fr) 28px;
      gap: 16px;
      align-items: center;
      width: 100%;
      text-align: left;
      background: none;
      border: 0;
      border-bottom: 1px solid var(--line);
      padding: 22px 8px;
      border-radius: 0;
      cursor: pointer;
      transition: all .25s ease
    }

    .k-item:hover {
      background: var(--fog);
      padding-left: 18px
    }

    .k-item[aria-expanded="true"] {
      background: var(--lilac-soft);
      padding-left: 18px
    }

    .k-item .kn {
      font-size: .72rem;
      font-weight: 700;
      color: var(--ink-3);
      letter-spacing: .12em;
      font-variant-numeric: tabular-nums
    }

    .k-item .kt {
      display: grid;
      gap: 4px
    }

    .k-item .kt b {
      font-family: var(--serif);
      font-weight: 700;
      font-size: clamp(1.45rem, 2.3vw, 2rem);
      line-height: 1.1;
      transition: color .2s ease
    }

    .k-item .kt small {
      font-size: .9rem;
      color: var(--ink-2);
      line-height: 1.4
    }

    .k-item .ka {
      opacity: .35;
      font-size: 1.1rem;
      transition: transform .25s ease, opacity .25s ease
    }

    .k-item:hover .kt b {
      color: var(--violet)
    }

    .k-item[aria-expanded="true"] .kt b {
      color: var(--violet)
    }

    .k-item[aria-expanded="true"] .ka {
      opacity: 1;
      transform: translateX(5px);
      color: var(--violet)
    }

    .k-item.dim {
      opacity: .45;
      filter: grayscale(80%)
    }

    .k-panel {
      position: sticky;
      top: 96px;
      background: var(--fog);
      padding: clamp(28px, 3.5vw, 44px);
      display: grid;
      gap: 20px;
      border: 0;
      border-top: 2px solid var(--violet);
      border-radius: 0;
      box-shadow: none
    }

    .k-panel .for {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .k-panel .for span {
      font-size: .74rem;
      font-weight: 600;
      padding: 6px 12px;
      background: var(--white);
      border-radius: 999px;
      border: 1px solid rgba(12, 12, 15, .06)
    }

    .k-panel .for span.up {
      background: var(--lilac);
      color: var(--ink);
      font-weight: 700;
      border-color: transparent
    }

    .k-panel h3 {
      font-family: var(--serif);
      font-size: clamp(2.1rem, 3.2vw, 2.9rem);
      font-weight: 700;
      line-height: 1.04
    }

    .k-panel h3 small {
      display: block;
      margin-top: 10px;
      font-family: var(--sans);
      font-size: 1rem;
      line-height: 1.4;
      color: var(--violet);
      font-weight: 500
    }

    .k-panel .desc {
      color: var(--ink-2);
      max-width: 54ch;
      font-size: 1.02rem;
      line-height: 1.6
    }

    .k-panel .tk {
      display: grid;
      gap: 12px;
      border-top: 1px solid var(--line);
      padding-top: 20px
    }

    .k-panel .tk li {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      font-size: .98rem;
      line-height: 1.5
    }

    .k-panel .tk li::before {
      content: "→";
      color: var(--violet);
      font-weight: 700
    }

    .k-panel .fmt {
      font-size: .86rem;
      color: var(--ink-3);
      font-weight: 500
    }

    .k-panel .btn {
      justify-self: start
    }

    /* ============ METHOD ============ */
    .m-steps {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1.5px solid var(--ink);
      margin-top: 24px
    }

    .m-step {
      position: relative;
      text-align: left;
      background: none;
      border: 0;
      border-right: 1px solid var(--line);
      padding: 24px 20px 26px 0;
      cursor: pointer;
      display: grid;
      gap: 10px;
      align-content: start;
      transition: background-color .2s ease
    }

    .m-step+.m-step {
      padding-left: 22px
    }

    .m-step:last-child {
      border-right: 0
    }

    .m-step::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -2px;
      height: 4px;
      background: var(--violet);
      border-radius: 4px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s ease
    }

    .m-step[aria-selected="true"]::before {
      transform: scaleX(1)
    }

    .m-step .n {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .16em;
      color: var(--ink-3)
    }

    .m-step b {
      font-family: var(--serif);
      font-weight: 700;
      font-size: clamp(1.9rem, 3vw, 2.7rem);
      line-height: 1;
      color: var(--ink-3);
      transition: color .25s ease
    }

    .m-step:hover b,
    .m-step[aria-selected="true"] b {
      color: var(--ink)
    }

    .m-step small {
      font-size: .92rem;
      color: var(--ink-2);
      line-height: 1.45
    }

    .m-detail {
      margin-top: 20px;
      background: var(--white);
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
      gap: 0;
      border: 1px solid var(--line);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 16px 36px -12px rgba(12, 12, 15, .08)
    }

    .m-detail>div {
      padding: clamp(28px, 3.5vw, 46px);
      display: grid;
      gap: 16px;
      align-content: start
    }

    .m-detail>div+div {
      border-left: 1px solid var(--line)
    }

    .m-detail h3 {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink-3)
    }

    .m-detail p {
      font-family: var(--serif);
      font-size: clamp(1.4rem, 2.2vw, 1.85rem);
      font-weight: 600;
      line-height: 1.24
    }

    .m-detail ul {
      display: grid;
      gap: 10px
    }

    .m-detail li {
      display: grid;
      grid-template-columns: 22px minmax(0, 1fr);
      font-size: .98rem;
      color: var(--ink-2);
      line-height: 1.5
    }

    .m-detail li::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-top: .6em;
      background: var(--violet);
      border-radius: 2px;
      transform: rotate(45deg)
    }

    .formats {
      margin-top: clamp(40px, 5vw, 60px);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 12px
    }

    .formats .label {
      margin-right: 12px;
      font-weight: 700
    }

    .formats li {
      background: var(--white);
      padding: 9px 16px;
      font-size: .9rem;
      font-weight: 500;
      border: 1px solid var(--line);
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .03)
    }

    /* ============ APPEARANCES ============ */
    .stage-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(36px, 5.5vw, 80px);
      align-items: start
    }

    .reel {
      position: relative;
      border: 1px solid rgba(12, 12, 15, .1);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 0 0 5px rgba(200, 181, 255, .25), 0 24px 50px -12px rgba(12, 12, 15, .16)
    }

    .reel .ph {
      --ar: 16/9;
      padding: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none
    }

    .reel .ph img {
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 0
    }

    .play {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 3;
      width: 86px;
      height: 86px;
      margin: -43px 0 0 -43px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .94);
      border: 1px solid rgba(255, 255, 255, .6);
      cursor: pointer;
      display: grid;
      place-items: center;
      box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
      transition: transform .3s ease, background-color .2s ease
    }

    .play::after {
      content: "";
      margin-left: 5px;
      border-left: 19px solid var(--ink);
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent
    }

    .play:hover {
      transform: scale(1.1);
      background: var(--lilac)
    }

    .reel-cap {
      display: flex;
      justify-content: space-between;
      margin-top: 14px;
      font-size: .88rem;
      color: var(--ink-3)
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 16px
    }

    .gallery .ph {
      --ar: 1/1
    }

    .ap-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 22px
    }

    .appear {
      border-top: 1px solid var(--ink)
    }

    .appear li {
      display: grid;
      grid-template-columns: 100px minmax(0, 1fr);
      gap: 18px;
      padding: 20px 8px;
      border-bottom: 1px solid var(--line);
      transition: background-color .25s ease, padding .25s ease
    }

    .appear li:hover {
      background: var(--lilac-soft);
      padding-left: 14px;
      padding-right: 14px
    }

    .appear .when {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-3);
      padding-top: 4px
    }

    .appear h3 {
      font-family: var(--serif);
      font-size: 1.4rem;
      font-weight: 600;
      line-height: 1.18;
      letter-spacing: -.01em
    }

    .appear p {
      font-size: .94rem;
      color: var(--ink-2);
      margin-top: 4px;
      line-height: 1.45
    }

    .tag {
      display: inline-block;
      margin-left: 8px;
      padding: 3px 10px;
      border-radius: 999px;
      background: var(--lilac);
      font-family: var(--sans);
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      vertical-align: middle
    }

    /* ============ WRITING + BOOK ============ */
    .essay {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 20px 40px;
      align-items: end;
      padding: clamp(32px, 4vw, 52px);
      border: 1px solid var(--line-ink);
      border-radius: 20px;
      text-decoration: none;
      transition: all .25s ease;
      margin-bottom: clamp(60px, 7.5vw, 100px)
    }

    .essay:hover {
      border-color: var(--lilac);
      background: #131318;
      transform: translateY(-3px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, .4)
    }

    .essay .t {
      font-family: var(--serif);
      font-size: clamp(2rem, 3.6vw, 3.2rem);
      font-weight: 700;
      line-height: 1.04;
      max-width: 22ch;
      margin-top: 14px;
      display: block
    }

    .essay .s {
      display: block;
      margin-top: 14px;
      color: var(--on-ink-2);
      max-width: 62ch;
      font-size: 1.02rem;
      line-height: 1.6
    }

    .essay .go {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--lilac);
      color: var(--ink);
      display: grid;
      place-items: center;
      font-size: 1.3rem;
      transition: transform .3s ease
    }

    .essay:hover .go {
      transform: rotate(45deg) scale(1.08)
    }

    .book-grid {
      display: grid;
      grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
      gap: clamp(44px, 7vw, 110px);
      align-items: center
    }

    .cover-stage {
      perspective: 1200px;
      display: grid;
      justify-items: center;
      gap: 20px
    }

    .cover {
      width: min(100%, 380px);
      transform-style: preserve-3d;
      transition: transform .5s cubic-bezier(.2, .8, .2, 1)
    }

    .cover .ph {
      --ar: 2/3;
      box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06)
    }

    .edition {
      display: inline-flex;
      border: 1px solid var(--line-ink);
      border-radius: 999px;
      padding: 4px
    }

    .edition button {
      background: none;
      border: 0;
      color: var(--on-ink-2);
      padding: 8px 15px;
      border-radius: 999px;
      cursor: pointer;
      font-size: .8rem;
      font-weight: 600;
      transition: background-color .2s ease, color .2s ease
    }

    .edition button[aria-pressed="true"] {
      background: var(--lilac);
      color: var(--ink)
    }

    .book-copy {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      min-width: 0
    }

    .book-title {
      font-family: var(--serif);
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 700;
      line-height: 1.02;
      letter-spacing: -.015em
    }

    .book-title small {
      display: block;
      margin-top: 8px;
      font-style: italic;
      font-size: .55em;
      color: var(--lilac);
      font-weight: 400
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .tags span {
      border: 1px solid var(--lilac);
      color: var(--lilac);
      padding: 6px 12px;
      border-radius: 999px;
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase
    }

    .book-copy>p {
      color: #CFCFD8;
      max-width: 56ch
    }

    .book-org {
      display: grid;
      gap: 8px;
      padding: 18px 0;
      border-block: 1px solid var(--line-ink)
    }

    .book-org li {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      font-size: .95rem;
      color: #D6D6DE
    }

    .book-org li::before {
      content: "—";
      color: var(--lilac)
    }

    /* ============ MOVEMENT ============ */
    .mv-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
      gap: clamp(32px, 6vw, 96px);
      align-items: center
    }

    .mv-copy {
      display: grid;
      gap: 22px
    }

    .mv-copy blockquote {
      margin: 0;
      font-family: var(--serif);
      font-size: clamp(1.6rem, 2.6vw, 2.2rem);
      line-height: 1.18
    }

    .mv-copy>p {
      color: var(--ink-2);
      max-width: 56ch
    }

    .m3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px
    }

    .m3 li {
      background: var(--white);
      padding: 26px 22px;
      display: grid;
      gap: 10px;
      align-content: start;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .03);
      transition: transform .3s ease, box-shadow .3s ease
    }

    .m3 li:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 32px -8px rgba(12, 12, 15, .09)
    }

    .m3 h3 {
      font-family: var(--serif);
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.05
    }

    .m3 p {
      font-size: .92rem;
      line-height: 1.5;
      color: var(--ink-2)
    }

    .mv-media .ph {
      --ar: 4/5
    }

    /* ============ PRESS ============ */
    .press-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(36px, 5.5vw, 84px);
      align-items: start
    }

    .press-list {
      border-top: 1.5px solid var(--ink)
    }

    .press-list li {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: baseline;
      gap: 6px 18px;
      padding: 22px 4px;
      border-bottom: 1px solid var(--line);
      transition: background-color .22s ease, padding .22s ease
    }

    .press-list li:hover {
      background: var(--fog);
      padding-left: 18px
    }

    .press-list h3 {
      font-family: var(--serif);
      font-size: clamp(1.65rem, 2.8vw, 2.4rem);
      font-weight: 700;
      line-height: 1.1;
      transition: color .2s ease
    }

    .press-list li:hover h3 {
      color: var(--violet)
    }

    .press-list .what {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-3)
    }

    .press-list p {
      flex-basis: 100%;
      font-size: .95rem;
      color: var(--ink-2);
      line-height: 1.5
    }

    .press-list a {
      color: var(--violet);
      font-weight: 500;
      text-underline-offset: 4px
    }

    .bio-card {
      position: sticky;
      top: 96px;
      background: var(--ink);
      color: var(--white);
      padding: clamp(32px, 3.8vw, 48px);
      display: grid;
      gap: 22px;
      border-radius: 20px;
      box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .5)
    }

    .bio-card .label {
      color: var(--lilac)
    }

    .bio-card h3 {
      font-family: var(--serif);
      font-size: 2.5rem;
      font-weight: 700;
      line-height: 1
    }

    .lens-tabs {
      display: inline-flex;
      border: 1px solid var(--line-ink);
      border-radius: 999px;
      padding: 4px;
      justify-self: start
    }

    .lens-tabs button {
      background: none;
      border: 0;
      color: var(--on-ink-2);
      padding: 8px 16px;
      border-radius: 999px;
      cursor: pointer;
      font-size: .82rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      transition: all .2s ease
    }

    .lens-tabs button[aria-pressed="true"] {
      background: var(--lilac);
      color: var(--ink);
      font-weight: 700
    }

    .bio-text {
      font-size: 1.02rem;
      line-height: 1.68;
      color: #D6D6DE;
      min-height: 9.5em
    }

    .bio-text i {
      font-family: var(--serif);
      font-size: 1.15em;
      font-weight: 600
    }

    .bio-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px
    }

    .bio-card ul {
      display: grid;
      gap: 8px;
      padding-top: 16px;
      border-top: 1px solid var(--line-ink)
    }

    .bio-card li {
      font-size: .92rem;
      color: var(--on-ink-2)
    }

    .bio-card li::before {
      content: "— ";
      color: var(--lilac);
      font-weight: 700
    }

    /* ============ TESTIMONIALS ============ */
    .quotes {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px
    }

    .quote {
      margin: 0;
      padding: clamp(32px, 3.5vw, 46px) clamp(24px, 2.8vw, 36px);
      display: grid;
      gap: 24px;
      align-content: space-between;
      border: 1px solid rgba(185, 178, 207, .35);
      border-radius: 20px;
      background: var(--white);
      box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .04);
      transition: transform .3s ease, box-shadow .3s ease
    }

    .quote:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 44px -10px rgba(12, 12, 15, .1)
    }

    .quote .qm {
      font-family: var(--serif);
      font-size: 4.8rem;
      line-height: .5;
      height: 28px;
      color: var(--violet)
    }

    .quote p {
      font-family: var(--serif);
      font-size: 1.38rem;
      font-weight: 600;
      line-height: 1.26;
      color: var(--ink)
    }

    .quote footer {
      font-size: .84rem;
      color: var(--ink-3);
      border-top: 1px solid var(--line);
      padding-top: 16px;
      line-height: 1.4
    }

    .quote footer b {
      display: block;
      color: var(--ink-2);
      font-size: .7rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 2px
    }

    /* ============ INVITE ============ */
    .inv-grid {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
      gap: clamp(36px, 6.5vw, 100px);
      align-items: start
    }

    .inv-intro {
      display: grid;
      gap: 24px;
      position: sticky;
      top: 96px
    }

    .inv-intro .lead {
      color: var(--ink)
    }

    .direct {
      border-top: 1.5px solid var(--ink);
      margin-top: 4px
    }

    .direct a,
    .direct div {
      display: grid;
      grid-template-columns: 100px minmax(0, 1fr);
      gap: 14px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(12, 12, 15, .18);
      text-decoration: none;
      transition: padding .2s ease
    }

    .direct a:hover {
      padding-left: 6px
    }

    .direct span {
      font-size: .64rem;
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      padding-top: 4px
    }

    .direct strong {
      font-weight: 600;
      overflow-wrap: anywhere
    }

    .direct a:hover strong {
      color: var(--violet)
    }

    /* ============ INVITE — LUXURY 3-STEP FORM ============ */
    .form-card {
      position: relative;
      background: #101015;
      border: 1px solid rgba(255, 255, 255, .09);
      padding: clamp(32px, 4.5vw, 56px);
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 30px 60px -20px rgba(12, 12, 15, .45)
    }

    .form-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(90% 55% at 84% 94%, rgba(200, 181, 255, .18) 0%, rgba(200, 181, 255, 0) 62%), radial-gradient(70% 45% at 12% 2%, rgba(59, 34, 168, .22) 0%, rgba(59, 34, 168, 0) 60%)
    }

    .form-card>* {
      position: relative;
      z-index: 1
    }

    .form-card :focus-visible {
      outline-color: var(--lilac)
    }

    .progress {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 34px
    }

    .progress div {
      display: grid;
      gap: 8px
    }

    .progress i {
      display: block;
      height: 4px;
      background: rgba(255, 255, 255, .12);
      position: relative;
      overflow: hidden;
      border-radius: 4px
    }

    .progress i::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--violet), var(--lilac));
      border-radius: 4px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .45s ease
    }

    .progress div.done i::after,
    .progress div.now i::after {
      transform: scaleX(1)
    }

    .progress span {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--on-ink-2)
    }

    .progress div.now span {
      color: var(--lilac)
    }

    .progress div.done span {
      color: var(--white)
    }

    .fstep {
      border: 0;
      margin: 0;
      padding: 0;
      min-width: 0
    }

    .fstep h3 {
      font-family: var(--serif);
      font-size: clamp(1.9rem, 3vw, 2.6rem);
      line-height: 1.1;
      color: var(--white);
      font-weight: 600
    }

    .fstep>p {
      margin-top: 8px;
      font-size: .95rem;
      color: var(--on-ink-2);
      line-height: 1.5
    }

    .fgrid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px 22px;
      margin-top: 26px
    }

    .field {
      display: grid;
      gap: 8px;
      align-content: start
    }

    .field.full {
      grid-column: 1/-1
    }

    .field>label,
    .field>.flabel {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--lilac)
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      font: inherit;
      font-size: 1.02rem;
      color: var(--white);
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 12px;
      padding: 14px 16px;
      appearance: none;
      -webkit-appearance: none;
      transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease
    }

    .field input::placeholder,
    .field textarea::placeholder {
      color: #9C9CA7
    }

    .field input:hover,
    .field select:hover,
    .field textarea:hover {
      border-color: rgba(200, 181, 255, .45);
      background: rgba(255, 255, 255, .08)
    }

    .field select {
      cursor: pointer;
      background-image: linear-gradient(45deg, transparent 50%, var(--lilac) 50%), linear-gradient(135deg, var(--lilac) 50%, transparent 50%);
      background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
      background-size: 5px 5px;
      background-repeat: no-repeat;
      padding-right: 36px
    }

    .field select option {
      color: var(--ink);
      background: var(--white)
    }

    .field textarea {
      min-height: 110px;
      resize: vertical;
      line-height: 1.5
    }

    .field input:focus,
    .field select:focus,
    .field textarea:focus {
      outline: 2px solid transparent;
      outline-offset: 1px;
      border-color: var(--lilac);
      background: rgba(255, 255, 255, .09);
      box-shadow: 0 0 0 3px rgba(200, 181, 255, .2)
    }

    .field input.err,
    .field textarea.err {
      border-color: #FF5C7A;
      box-shadow: 0 0 0 3px rgba(255, 92, 122, .25)
    }

    .field input[type="date"] {
      color-scheme: dark
    }

    .opts {
      display: flex;
      flex-wrap: wrap;
      gap: 10px
    }

    .opts label {
      position: relative
    }

    .opts input {
      position: absolute;
      opacity: 0;
      inset: 0;
      cursor: pointer;
      margin: 0
    }

    .opts span {
      display: inline-block;
      padding: 9px 16px;
      border: 1px solid rgba(255, 255, 255, .18);
      background: rgba(255, 255, 255, .04);
      color: var(--on-ink-2);
      border-radius: 999px;
      font-size: .88rem;
      font-weight: 500;
      cursor: pointer;
      transition: all .2s ease
    }

    .opts label:hover span {
      border-color: var(--lilac);
      color: var(--white);
      background: rgba(200, 181, 255, .1)
    }

    .opts input:checked+span {
      background: var(--lilac);
      border-color: var(--lilac);
      color: var(--ink);
      font-weight: 700;
      box-shadow: 0 0 24px rgba(200, 181, 255, .4)
    }

    .opts input:focus-visible+span {
      outline: 2px solid var(--lilac);
      outline-offset: 2px
    }

    .fnav {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, .12)
    }

    .fnav .note {
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--lilac);
      padding: 6px 14px;
      background: rgba(200, 181, 255, .1);
      border-radius: 999px;
      border: 1px solid rgba(200, 181, 255, .2)
    }

    .btn-send {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--lilac);
      color: var(--ink);
      border: 0;
      border-radius: 999px;
      padding: 16px 30px;
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 0 34px rgba(200, 181, 255, .38);
      transition: box-shadow .3s ease, background-color .25s ease, transform .15s ease
    }

    .btn-send:hover {
      background: var(--white);
      box-shadow: 0 0 52px rgba(200, 181, 255, .55)
    }

    .btn-send:active {
      transform: scale(.98)
    }

    .btn-send .arr {
      display: inline-block;
      transition: transform .22s ease
    }

    .btn-send:hover .arr {
      transform: translateX(5px)
    }

    .btn-back {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, .3);
      color: var(--white);
      box-shadow: none
    }

    .btn-back:hover {
      background: rgba(255, 255, 255, .12);
      border-color: var(--white);
      box-shadow: none
    }

    .summary {
      margin-top: 20px;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(200, 181, 255, .2);
      border-left: 4px solid var(--lilac);
      padding: 18px 22px;
      display: grid;
      gap: 6px;
      font-size: .92rem;
      color: var(--on-ink-2);
      border-radius: 0 14px 14px 0
    }

    .summary b {
      color: var(--white);
      font-weight: 600
    }

    .summary span {
      line-height: 1.4
    }

    .sent {
      display: grid;
      gap: 18px;
      padding-block: 28px;
      text-align: center;
      justify-items: center
    }

    .sent .tick {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--lilac), var(--violet));
      color: var(--white);
      display: grid;
      place-items: center;
      font-size: 1.8rem;
      font-weight: 800;
      box-shadow: 0 0 44px rgba(200, 181, 255, .4)
    }

    .sent h3 {
      font-family: var(--serif);
      font-size: clamp(2.1rem, 3.4vw, 2.9rem);
      line-height: 1;
      font-weight: 700;
      color: var(--white)
    }

    .sent p {
      color: var(--on-ink-2);
      max-width: 42ch;
      font-size: 1.02rem;
      line-height: 1.6
    }

    /* ============ HOVER FOOTER ============ */
    .footer-wrap {
      padding: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 44px);
      background: var(--ink)
    }

    .hover-footer {
      position: relative;
      background: #101015;
      border: 1px solid rgba(255, 255, 255, .09);
      border-radius: 28px;
      overflow: hidden;
      box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6)
    }

    .footer-bg-grad {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: radial-gradient(120% 90% at 50% 0%, rgba(200, 181, 255, .14) 0%, rgba(15, 15, 17, 0) 55%), radial-gradient(80% 60% at 80% 100%, rgba(59, 34, 168, .18) 0%, transparent 60%)
    }

    .footer-inner {
      position: relative;
      z-index: 10;
      max-width: 1280px;
      margin-inline: auto;
      padding: clamp(40px, 5vw, 68px) clamp(24px, 4vw, 56px) 24px
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.1fr);
      gap: clamp(28px, 4vw, 52px);
      padding-bottom: 32px
    }

    .footer-brand {
      display: grid;
      gap: 14px;
      align-content: start
    }

    .footer-brand .brand-title {
      font-family: var(--display);
      font-size: clamp(2.15rem, 3.4vw, 2.85rem);
      font-weight: 800;
      font-style: italic;
      line-height: 1;
      letter-spacing: -.015em;
      color: var(--white);
      transition: transform .25s ease
    }

    .footer-brand .brand-title:hover {
      transform: translateX(3px)
    }

    .footer-brand .brand-title em {
      font-family: var(--display);
      color: var(--lilac);
      font-style: italic;
      font-weight: 800;
      letter-spacing: -.01em
    }

    .footer-brand p {
      font-size: .9rem;
      line-height: 1.58;
      color: var(--on-ink-2);
      max-width: 34ch
    }

    .footer-brand .foot-method {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 10px;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--lilac);
      margin-top: 6px
    }

    .footer-brand .foot-method i {
      font-style: normal;
      color: rgba(255, 255, 255, .4)
    }

    .footer-col h3,
    .footer-col h4 {
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 18px
    }

    .footer-col ul {
      display: grid;
      gap: 11px
    }

    .footer-col a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: .9rem;
      color: #C2C2CD;
      text-decoration: none;
      transition: color .2s ease, transform .2s ease
    }

    .footer-col a:hover {
      color: var(--lilac);
      transform: translateX(3px)
    }

    .footer-col a.btn,
    .footer-col a.btn:hover {
      color: var(--ink);
      transform: none
    }

    .pulse-badge {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--lilac);
      animation: pulse-dot 2s infinite
    }

    @keyframes pulse-dot {
      0% {
        box-shadow: 0 0 0 0 rgba(200, 181, 255, .6)
      }

      70% {
        box-shadow: 0 0 0 7px rgba(200, 181, 255, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(200, 181, 255, 0)
      }
    }

    .footer-contact-list {
      display: grid;
      gap: 14px
    }

    .footer-contact-item {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: .9rem;
      color: #C2C2CD;
      text-decoration: none;
      transition: color .2s ease
    }

    .footer-contact-item:hover {
      color: var(--white)
    }

    .footer-contact-item svg {
      color: var(--lilac);
      flex-shrink: 0
    }

    .footer-divider {
      border: 0;
      border-top: 1px solid rgba(255, 255, 255, .08);
      margin-block: 24px
    }

    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      font-size: .85rem;
      color: #8E8E9A
    }

    .footer-socials {
      display: flex;
      gap: 16px;
      align-items: center
    }

    .footer-socials a {
      color: #A9A9B5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
      padding: 10px;
      margin: -10px;
      transition: color .2s ease, transform .2s ease
    }

    .footer-socials a:hover {
      color: var(--lilac);
      transform: translateY(-2px)
    }

    .footer-hover-container {
      position: relative;
      width: 100%;
      height: clamp(140px, 24vw, 280px);
      margin-top: clamp(-40px, -4vw, -16px);
      margin-bottom: clamp(-20px, -2vw, 0);
      pointer-events: auto;
      z-index: 20;
      display: flex;
      justify-content: center;
      align-items: center
    }

    .text-hover-svg {
      width: 100%;
      height: 100%;
      user-select: none;
      cursor: pointer;
      overflow: visible
    }

    @keyframes strokeDraw {
      0% {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000
      }

      100% {
        stroke-dasharray: 1000;
        stroke-dashoffset: 0
      }
    }

    .sr {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap
    }

    /* skip link — invisible until keyboard focus */
    .skip-link {
      position: absolute;
      left: 16px;
      top: -64px;
      z-index: 120;
      background: var(--ink);
      color: var(--white);
      padding: 10px 18px;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-decoration: none;
      transition: top .2s ease
    }

    .skip-link:focus {
      top: 14px;
      outline-color: var(--lilac)
    }

    /* offset anchor targets below the floating nav */
    main section[id] {
      scroll-margin-top: 108px
    }

    /* ============ VIDEO MODAL LIGHTBOX ============ */
    .video-modal {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: grid;
      place-items: center;
      padding: 20px
    }

    .video-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(12, 12, 15, .85);
      backdrop-filter: blur(10px)
    }

    .video-modal-dialog {
      position: relative;
      z-index: 2;
      width: min(900px, 94vw);
      background: #14121B;
      border: 1px solid var(--line-ink);
      box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
      border-radius: 16px;
      overflow: hidden
    }

    .video-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 20px;
      border-bottom: 1px solid var(--line-ink);
      color: var(--white)
    }

    .video-modal-header h4 {
      font-family: var(--serif);
      font-size: 1.3rem
    }

    .video-modal-close {
      background: none;
      border: 0;
      color: var(--on-ink-2);
      font-size: 1.6rem;
      cursor: pointer;
      line-height: 1;
      padding: 4px;
      transition: color .2s ease
    }

    .video-modal-close:hover {
      color: var(--lilac)
    }

    .video-player-wrapper {
      position: relative;
      aspect-ratio: 16/9;
      background: #000;
      display: grid;
      place-items: center;
      overflow: hidden
    }

    .video-player-placeholder {
      position: relative;
      inset: 0;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center
    }

    .video-player-placeholder .reel-still {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .35;
      filter: grayscale(.15)
    }

    .reel-request {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 14px;
      text-align: center;
      color: var(--white);
      padding: 30px;
      max-width: 46ch;
      justify-items: center
    }

    .reel-request h3 {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      font-weight: 600;
      line-height: 1.1
    }

    .reel-request p {
      font-size: .95rem;
      color: var(--on-ink-2);
      line-height: 1.55
    }

    /* ============ TOAST NOTIFICATION ============ */
    .toast-container {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 100;
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: none
    }

    .toast {
      pointer-events: auto;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--ink);
      color: var(--white);
      border: 1px solid var(--lilac);
      padding: 12px 20px;
      border-radius: 999px;
      font-size: .86rem;
      font-weight: 500;
      box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
      animation: toastIn .3s cubic-bezier(.16, 1, .3, 1) forwards
    }

    @keyframes toastIn {
      from {
        opacity: 0;
        transform: translateY(16px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    /* ============ BACK TO TOP ============ */
    .back-to-top {
      position: fixed;
      bottom: 28px;
      left: 28px;
      z-index: 60;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .9);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      color: var(--ink);
      border: 1px solid rgba(12, 12, 15, .12);
      display: grid;
      place-items: center;
      font-size: 1.15rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 8px 24px -4px rgba(12, 12, 15, .14);
      transition: opacity .3s ease, transform .3s ease, background-color .2s ease, border-color .2s ease;
      opacity: 0;
      pointer-events: none
    }

    .back-to-top.visible {
      opacity: 1;
      pointer-events: auto
    }

    .back-to-top:hover {
      background: var(--ink);
      color: var(--white);
      border-color: var(--ink);
      transform: translateY(-3px);
      box-shadow: 0 12px 28px -4px rgba(12, 12, 15, .25)
    }

    @media (prefers-reduced-motion:no-preference) {
      html {
        scroll-behavior: smooth
      }
    }

    @media (prefers-reduced-motion:reduce) {
      * {
        transition: none !important;
        animation: none !important
      }
    }

    /* ============ PRINT STYLES ============ */
    @media print {

      .nav-outer,
      .stage-bar,
      .creds,
      .back-to-top,
      .footer-wrap,
      .video-modal,
      .toast-container {
        display: none !important
      }

      .band {
        padding-block: 24px !important
      }

      .bg-ink {
        background: white !important;
        color: black !important
      }

      .bg-ink .label {
        color: #3B22A8 !important
      }

      body {
        font-size: 11pt;
        color: black;
        background: white
      }
    }

    /* ============ RESPONSIVE ============ */
    @media (max-width:1120px) {

      .nav-links,
      .nav-in>.btn {
        display: none
      }

      .menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding: 10px 18px
      }

      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .m-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .m-step:nth-child(2) {
        border-right: 0
      }

      .m-step:nth-child(3) {
        padding-left: 0
      }

      .m-step:nth-child(n+3) {
        border-top: 1px solid var(--line)
      }
    }

    @media (max-width:880px) {

      .hero-grid,
      .head,
      .two,
      .macro-grid,
      .profile-grid,
      .ex-panel,
      .k-grid,
      .m-detail,
      .stage-grid,
      .book-grid,
      .mv-grid,
      .press-grid,
      .inv-grid,
      .essay {
        grid-template-columns: minmax(0, 1fr)
      }

      .hero-media {
        max-width: 460px
      }

      .stage-bar-in {
        gap: 8px 16px
      }

      .stage-bar .go {
        margin-left: 0
      }

      .profile-media,
      .k-panel,
      .bio-card,
      .inv-intro {
        position: static
      }

      .profile-media {
        max-width: 440px
      }

      .k-list .k-panel {
        margin: 4px 0 18px
      }

      .m-detail>div+div {
        border-left: 0;
        border-top: 1px solid var(--line)
      }

      .quotes,
      .m3 {
        grid-template-columns: minmax(0, 1fr)
      }

      .mv-media {
        order: -1;
        max-width: 440px
      }

      .levels .level {
        width: 100% !important
      }

      .ex-tab {
        margin-right: 16px;
        padding-right: 0
      }
    }

    @media (max-width:560px) {
      body {
        font-size: 1rem
      }

      .creds-list li {
        font-size: .72rem;
        padding: 7px 14px
      }

      .creds-list {
        gap: 8px
      }

      .facts div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px
      }

      .m-steps {
        grid-template-columns: minmax(0, 1fr)
      }

      .m-step,
      .m-step+.m-step {
        padding-left: 0;
        border-right: 0;
        border-top: 1px solid var(--line)
      }

      .footer-grid {
        grid-template-columns: minmax(0, 1fr)
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
      }

      .appear li {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px
      }

      .direct a,
      .direct div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px
      }

      .fgrid {
        grid-template-columns: minmax(0, 1fr)
      }

      .progress {
        gap: 6px
      }

      .fstep h3 {
        font-size: 1.75rem
      }

      .play {
        width: 62px;
        height: 62px;
        margin: -31px 0 0 -31px
      }

      .play::after {
        border-left-width: 15px;
        border-top-width: 10px;
        border-bottom-width: 10px
      }

      .reel .ph figcaption span {
        display: none
      }

      .gallery .ph figcaption span {
        display: none
      }

      .btn {
        padding: 14px 18px
      }

      .ex-tabs {
        display: grid;
        grid-template-columns: minmax(0, 1fr)
      }

      .ex-tab {
        margin-right: 0;
        padding: 12px 0;
        border-bottom: 1px solid var(--line)
      }
    }