/* Look A of /build-a-website, "Row of three" (docs/prototype-2026-10-26-want-a-website/brief-a.md).
   Calm and white: one centred column (62ch) for the intro, the FAQ, the form and the line under it, and the showcase across the
   full .wrap in three browser frames, the third dashed and empty, a link down to the form. Every class is website-. */

@layer site {
  .website { padding: 40px 0 24px; background: var(--white); color: var(--ink); }
  .website-col { max-width: 62ch; margin: 0 auto; font-size: 16px; line-height: 24px; }

  .website-h1 { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -.03em; text-align: center; }
  .website-h2 { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; text-align: center; margin-bottom: 24px; }

  /* the intro */
  .website-intro { display: grid; gap: 12px; margin-top: 20px; text-align: center; }

  /* the showcase: three frames in a row */
  .website-show { margin-top: 64px; }
  .website-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .website-slot { display: grid; gap: 6px; min-width: 0; }
  .website-frame { display: block; border: 1px solid var(--dove); border-radius: var(--r); overflow: hidden; background: var(--white); }
  .website-bar { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; border-bottom: 1px solid var(--dove); background: var(--cream); }
  .website-dots { display: flex; gap: 5px; flex: none; }
  .website-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--dove); background: var(--white); }
  .website-domain { font-size: 13px; line-height: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .website-shot { width: 100%; height: auto; aspect-ratio: 960 / 600; object-fit: cover; object-position: top; }
  .website-name { margin-top: 8px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -.01em; }
  .website-what { font-size: 14px; line-height: 20px; color: var(--ink); }

  /* the empty slot: the same frame, dashed, its words inside, the whole of it a link down to the form */
  .website-frame--next { border-style: dashed; border-color: var(--steel); color: var(--ink); text-decoration: none; }
  .website-frame--next .website-bar { border-bottom-style: dashed; border-bottom-color: var(--steel); background: var(--white); }
  .website-empty { display: grid; place-content: center; gap: 6px; aspect-ratio: 960 / 600; padding: 16px 24px; text-align: center; }
  .website-empty__name { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.02em; text-decoration: underline;
    text-decoration-color: var(--dove); text-underline-offset: 4px; }
  .website-empty__what { font-size: 14px; line-height: 20px; max-width: 32ch; }
  .website-frame--next:hover { background: var(--cream); }
  .website-frame--next:hover .website-empty__name { text-decoration-color: var(--ink); }

  /* the FAQ: details on dove rules, a plus drawn in CSS that turns to a cross when open */
  /* the sent page: the showcase and the questions, neither on the form's page */
  .website--sent { padding-top: 0; }
  .website--sent .website-show { margin-top: 48px; }
  .website-faq { margin-top: 72px; }
  .website-qs { border-bottom: 1px solid var(--dove); }
  .website-q { border-top: 1px solid var(--dove); }
  .website-q__sum { position: relative; display: flex; align-items: center; min-height: 48px; padding: 10px 40px 10px 0; cursor: pointer;
    list-style: none; font-weight: 600; }
  .website-q__sum::-webkit-details-marker { display: none; }
  .website-q__sum::before, .website-q__sum::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 2px; margin-top: -1px;
    background: var(--ink); transition: transform .2s ease; }
  .website-q__sum::after { transform: rotate(90deg); }
  .website-q[open] > .website-q__sum::before { transform: rotate(45deg); }
  .website-q[open] > .website-q__sum::after { transform: rotate(135deg); }
  .website-q__sum:focus-visible { outline-offset: -2px; }
  .website-q__a { padding: 0 40px 16px 0; }

  /* the form on white, in the same column */
  .website-apply { margin-top: 72px; }
  .website-form { font-size: 14px; line-height: 20px; }
  .website-form .apply-sec:first-of-type { padding-top: 0; }

  /* who it is for and the counter: small, full contrast */
  .website-who { display: grid; gap: 4px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--dove);
    font-size: 13px; line-height: 20px; color: var(--ink); text-align: center; }
  .website-who__h { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0; }

  @media (max-width: 900px) {
    .website-row { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 560px; margin: 0 auto; }
  }

  @media (max-width: 560px) {
  }

  @media (max-width: 720px) {
    .website { padding-top: 24px; }
    .website-h1 { font-size: 32px; line-height: 36px; }
    .website-h2 { font-size: 22px; line-height: 28px; margin-bottom: 20px; }
    .website-show { margin-top: 48px; }
    .website-faq, .website-apply { margin-top: 56px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .website-q__sum::before, .website-q__sum::after { transition: none; }
  }
}