/* ai.css — styles specific to the Design × AI page (ai/index.html).
   Shared design-system rules are in base.css. */

    /* ---------- Header ---------- */
    .header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 31;
      mix-blend-mode: difference;
      filter: invert(1);
    }
    .header__main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: clamp(16px, calc(16px + 8 * (var(--vp) - 320px) / 448), 24px);
    }
    .header a { color: var(--ink); text-decoration: none; }
    .header__logo {
      font-family: var(--serif);
      font-size: clamp(22px, calc(var(--vp) / 1920 * 28), 28px);
      letter-spacing: -0.01em;
    }
    .header__back {
      font-size: 1.3rem;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    /* ---------- Page hero ---------- */
    .page-hero {
      padding-top: clamp(140px, calc(140px + 80 * (var(--vp) - 375px) / 1425), 220px);
      padding-bottom: clamp(60px, calc(60px + 40 * (var(--vp) - 375px) / 1425), 100px);
    }
    .page-hero__label { margin-bottom: 2.4rem; }
    .page-hero__title { max-width: 16ch; margin-bottom: 3.2rem; }

    /* ---------- Manifesto divider (borrowed: punchy statement lines) ---------- */
    .manifesto {
      padding: clamp(80px, calc(80px + 60 * (var(--vp) - 375px) / 1425), 160px) 0;
    }
    .manifesto__line {
      font-family: var(--serif);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: -0.02em;
      font-size: clamp(30px, calc(var(--vp) / 1920 * 56), 56px);
      max-width: 24ch;
    }
    .manifesto__line em { font-style: italic; }

    /* ---------- Capability cards (borrowed: headline + copy + bullets + visual) ---------- */
    .caps { padding-top: 4rem; }
    .caps__title { margin-bottom: 6.4rem; max-width: 18ch; }
    .cap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(24px, calc(24px + 40 * (var(--vp) - 375px) / 1425), 80px);
      align-items: center;
      padding: clamp(40px, calc(40px + 40 * (var(--vp) - 375px) / 1425), 96px) 0;
      border-top: 1px solid rgba(34, 31, 32, 0.15);
    }
    .cap__index {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
      margin-bottom: 2rem;
      opacity: 0.5;
    }
    .cap__headline { margin-bottom: 2rem; }
    .cap__desc { margin-bottom: 3.2rem; }
    .cap__list { list-style: none; display: flex; flex-direction: column; gap: 1.2rem; }
    .cap__list li {
      position: relative;
      padding-left: 2.4rem;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.01em;
      line-height: 1.4;
    }
    /* small arrow marker, echoing the button icon */
    .cap__list li::before {
      content: '→';
      position: absolute;
      left: 0;
      top: 0;
    }
    .cap__visual {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4 / 3;
    }
    .cap__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cap--flip .cap__body { order: 2; }
    @media (max-width: 767px) {
      .cap { grid-template-columns: 1fr; }
      .cap--flip .cap__body { order: 0; }
    }

    /* ---------- Prompt → result (borrowed: before/after replacement) ---------- */
    .prompts { padding-top: clamp(80px, calc(80px + 60 * (var(--vp) - 375px) / 1425), 160px); }
    .prompts__title { margin-bottom: 5.4rem; max-width: 20ch; }
    .prompt {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: clamp(20px, calc(20px + 30 * (var(--vp) - 375px) / 1425), 60px);
      align-items: center;
      padding: 4rem 0;
      border-top: 1px solid rgba(34, 31, 32, 0.15);
    }
    .prompt__text {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(18px, calc(var(--vp) / 1920 * 24), 24px);
      line-height: 1.3;
    }
    .prompt__text .prompt__tag {
      display: block;
      font-family: var(--sans);
      font-style: normal;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      opacity: 0.5;
      margin-bottom: 1.2rem;
    }
    .prompt__result { overflow: hidden; aspect-ratio: 16 / 10; }
    .prompt__result img { width: 100%; height: 100%; object-fit: cover; display: block; }
    @media (max-width: 767px) {
      .prompt { grid-template-columns: 1fr; }
    }

    /* ---------- Point of view (two-column: for / not for) ---------- */
    .pov { padding: clamp(80px, calc(80px + 60 * (var(--vp) - 375px) / 1425), 160px) 0; }
    .pov__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(24px, calc(24px + 40 * (var(--vp) - 375px) / 1425), 80px);
      margin-top: 4.8rem;
    }
    .pov__col-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin-bottom: 2rem;
      padding-bottom: 1.2rem;
      border-bottom: 1px solid var(--ink);
    }
    .pov__col ul { list-style: none; display: flex; flex-direction: column; gap: 1.6rem; }
    .pov__col li {
      font-family: var(--serif);
      font-size: clamp(18px, calc(var(--vp) / 1920 * 22), 22px);
      line-height: 1.3;
    }
    @media (max-width: 767px) {
      .pov__grid { grid-template-columns: 1fr; gap: 4.8rem; }
    }

    /* ---------- Bio (borrowed: first-person, personal) ---------- */
    .bio {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: clamp(24px, calc(24px + 40 * (var(--vp) - 375px) / 1425), 80px);
      align-items: center;
      padding: clamp(80px, calc(80px + 40 * (var(--vp) - 375px) / 1425), 140px) 0;
    }
    .bio__photo { overflow: hidden; aspect-ratio: 0.85 / 1; }
    .bio__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .bio__title { margin-bottom: 3.2rem; }
    .bio__text p { margin-bottom: 2rem; max-width: 46ch; line-height: 1.5; }
    @media (max-width: 767px) {
      .bio { grid-template-columns: 1fr; }
      .bio__photo { order: 2; }
    }

    /* ---------- FAQ (borrowed: objection handling) ---------- */
    .faq { padding: clamp(80px, calc(80px + 60 * (var(--vp) - 375px) / 1425), 160px) 0; }
    .faq__title { margin-bottom: 4.8rem; }
    .faq__item {
      border-top: 1px solid rgba(34, 31, 32, 0.15);
      padding: 0;
    }
    .faq__item[open] { padding-bottom: 3.2rem; }
    .faq__q {
      list-style: none;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2rem;
      padding: 3.2rem 0;
      font-family: var(--serif);
      font-size: clamp(20px, calc(var(--vp) / 1920 * 28), 28px);
      line-height: 1.2;
    }
    .faq__q::-webkit-details-marker { display: none; }
    .faq__q::after {
      content: '+';
      font-family: var(--sans);
      font-size: 2.4rem;
      transition: transform 0.4s var(--ease-inout);
    }
    .faq__item[open] .faq__q::after { transform: rotate(45deg); }
    .faq__a {
      max-width: 60ch;
      line-height: 1.6;
      font-size: clamp(15px, calc(var(--vp) / 1920 * 16), 16px);
    }

    /* ---------- CTA ---------- */
    .page-cta {
      text-align: center;
      padding: clamp(100px, calc(100px + 60 * (var(--vp) - 375px) / 1425), 200px) 0;
    }
    .page-cta__title { margin-bottom: 4rem; max-width: 18ch; margin-inline: auto; }
    .page-cta__actions {
      display: flex;
      gap: 4rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* ---------- Footer (shared, trimmed) ---------- */
    .footer {
      border-top: 1px solid var(--ink);
      padding: 3.2rem 0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1.6rem;
      font-size: 12px;
      text-transform: uppercase;
    }
    .footer a { color: var(--ink); text-decoration: none; opacity: 0.7; }
    .footer a:hover { opacity: 1; }
    .footer nav { display: flex; gap: 2.4rem; }