/* PromptHorizon desktop reading and layout pass, 2026-11-08.
   Loaded after the existing site styles; release-specific URL in index.html. */
:root {
  --ph-reading-font: "Noto Sans SC Variable", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --ph-body-size: 1rem;
  --ph-caption-size: .8125rem;
  --ph-text-primary: #eef3ff;
  --ph-text-secondary: #afbdd8;
  --ph-text-muted: #96a6c4;
}

@media (min-width: 821px) {
  /* Size columns against their container, so ultrawide screens cannot squeeze copy. */
  .hero-content {
    width: min(calc(100% - 96px), 1360px);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    gap: clamp(40px, 4vw, 80px);
    align-items: center;
    padding: clamp(126px, 15svh, 156px) 0 clamp(64px, 8svh, 96px);
  }

  .copy-block {
    align-self: center;
    min-width: 0;
    max-width: none;
  }

  .copy-block h1 {
    font-size: clamp(3.5rem, 4vw, 4rem);
    line-height: 1.14;
    letter-spacing: -.055em;
    font-weight: 820;
    text-wrap: balance;
  }

  .eyebrow {
    font-size: var(--ph-caption-size);
    letter-spacing: .12em;
    line-height: 1.6;
  }

  .ph-beta-badge {
    font-size: var(--ph-caption-size);
    letter-spacing: .04em;
    margin-bottom: 18px;
  }

  .hero-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-top: 28px;
    padding-top: 22px;
  }

  .description {
    max-width: 34em;
    font-size: var(--ph-body-size);
    line-height: 1.85;
    color: #bdc8df;
    text-wrap: pretty;
  }

  .primary-cta {
    min-width: 168px;
    height: 52px;
    padding-inline: 26px;
    font-size: .9375rem;
    letter-spacing: .03em;
  }

  .ph-demo-shell {
    width: 100%;
    max-width: 620px;
    justify-self: end;
    transform: none;
  }

  .ph-demo {
    width: min(100%, calc((100svh - 240px) * 420 / 460));
    min-width: min(100%, 340px);
    margin-left: auto;
  }

  .content-section {
    padding: 104px max(48px, calc((100vw - 1280px) / 2));
  }

  .section-head {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 44px;
  }

  .section-index {
    font-size: 2rem;
    line-height: 1.2;
  }

  .section-eyebrow {
    font-size: var(--ph-caption-size) !important;
    letter-spacing: .12em;
    line-height: 1.6;
    margin-bottom: 14px;
  }

  .section-head h2,
  .about-copy h2 {
    font-size: clamp(2.5rem, 3vw, 3rem);
    line-height: 1.23;
    letter-spacing: -.04em;
    font-weight: 500;
    text-wrap: balance;
  }

  .section-copy {
    max-width: 42em;
    margin-top: 22px;
    font-size: var(--ph-body-size) !important;
    line-height: 1.85;
    text-wrap: pretty;
  }

  .ph-tutorial { margin-bottom: 48px; }
  .ph-tut-head { margin-bottom: 20px; }
  .ph-tut-eyebrow { font-size: var(--ph-caption-size); letter-spacing: .12em; }
  .ph-tutorial h3 { font-size: 1.5rem; line-height: 1.4; font-weight: 500; }

  .capability-card { min-height: 264px; padding: 30px; }
  .capability-card h3 {
    margin: 48px 0 14px;
    font-size: 1.375rem !important;
    line-height: 1.4;
    font-weight: 500;
  }
  .capability-card p { font-size: var(--ph-body-size); line-height: 1.8; }

  .prompt-demo { margin-top: 56px; }
  .demo-bar { font: 400 var(--ph-caption-size)/1.6 var(--ph-reading-font); letter-spacing: .03em; }
  .demo-prompt { padding: 32px; gap: 18px; min-width: 0; }
  .lang-tag { font-size: .875rem; line-height: 1.5; padding: 6px 10px; }
  .demo-prompt > p {
    margin: 0;
    font-family: var(--ph-reading-font);
    font-size: 1.125rem;
    line-height: 1.85;
    color: #dfe7f7;
    overflow-wrap: anywhere;
  }
  .demo-prompt > p.ph-en {
    margin: 0;
    font-family: var(--ph-reading-font);
    font-size: var(--ph-body-size);
    line-height: 1.75;
    letter-spacing: normal;
    color: var(--ph-text-secondary);
  }
  .demo-reference .ph-tag { font-size: .75rem; letter-spacing: .04em; }
  .prompt-actions { margin-top: auto; flex-wrap: wrap; }
  .prompt-actions button { font-size: .9375rem; line-height: 1.5; }

  .workflow-step {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 24px;
    min-height: 148px;
    padding-block: 28px;
  }
  .workflow-step h3 { font-size: 1.375rem !important; line-height: 1.4; margin-bottom: 12px; font-weight: 500; }
  .workflow-step p { max-width: 44em; font-size: var(--ph-body-size); line-height: 1.8; }
  .workflow-step .step-number { font-size: 2rem !important; }
  .guide-note { max-width: 820px; margin-top: 32px; padding: 20px 22px; }
  .guide-note p { font-size: .9375rem; line-height: 1.8; color: var(--ph-text-secondary); }

  .showcase-meta { padding: 24px; }
  .showcase-meta span { font-size: .75rem !important; letter-spacing: .04em; }
  .showcase-meta h3 { font-size: 1.5rem !important; line-height: 1.4; font-weight: 500; }
  .showcase-meta p { font-size: var(--ph-body-size); line-height: 1.75; color: var(--ph-text-muted); }
  .ph-shot figcaption { font-size: .75rem; line-height: 1.5; letter-spacing: .02em; }
  .showcase-card.wide { display: flex; flex-direction: column; }
  .wide .art { min-height: 480px; flex: 1; }
  .showcase-card .art-two { min-height: 340px; }
  .ph-refs { grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: stretch; }
  .ph-ref { min-height: 0; }
  .ph-ref .ph-shot { height: 100%; min-height: 0; }
  .ph-ref .ph-shot img { height: calc(100% - 26px); min-height: 0; aspect-ratio: auto; }

  .ph-card { padding: 30px; }
  .ph-dl-card .ph-ver { font: 400 var(--ph-caption-size)/1.5 var(--ph-reading-font); letter-spacing: .02em; }
  .ph-dl-card h3 { font-size: 1.375rem; line-height: 1.45; font-weight: 500; }
  .ph-dl-card li { font-size: var(--ph-body-size); line-height: 1.75; }
  .ph-btn { font-size: 1rem; line-height: 1.5; }
  .ph-steps-title { font-size: var(--ph-caption-size); line-height: 1.5; letter-spacing: .1em; }
  .ph-steps b { font-size: 1rem; line-height: 1.6; margin-top: 1px; }
  .ph-steps p { font-size: var(--ph-body-size); line-height: 1.75; }
  .ph-steps ol { gap: 20px; }
  .ph-note { font-size: .875rem; line-height: 1.75; }

  .about-section { min-height: 0; gap: clamp(48px, 6vw, 96px); align-items: center; }
  .about-copy > p:not(.section-eyebrow) { margin: 24px 0; font-size: var(--ph-body-size); line-height: 1.85; }
  .about-copy li { font-size: var(--ph-body-size); line-height: 1.75; }
  .about-card { padding: 30px; min-height: 360px; }
  .about-card > span { font-size: .75rem; line-height: 1.5; margin-top: 64px; }
  .about-card p { font-size: .75rem; line-height: 1.5; letter-spacing: .06em; }
  .about-card a { font-size: .9375rem; line-height: 1.5; left: 30px; }

  footer { padding: 36px max(48px, calc((100vw - 1280px) / 2)); gap: 32px; }
  footer > div { font-size: .875rem; gap: 24px; }
  footer > p { font: 400 .75rem/1.7 var(--ph-reading-font); color: var(--ph-text-muted); letter-spacing: .02em; }

  .ph-qr-card p { font-size: var(--ph-body-size); line-height: 1.7; }
  .ph-qr-card small { font-size: var(--ph-caption-size); line-height: 1.75; color: var(--ph-text-muted); }
}

/* Narrow desktop windows and enlarged browser views keep a readable single column. */
@media (min-width: 821px) and (max-width: 1100px) {
  .hero-content {
    width: min(calc(100% - 80px), 860px);
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "copy" "card";
    gap: 40px;
    padding-block: 132px 72px;
  }
  .copy-block { max-width: 700px; }
  .copy-block h1 { font-size: 3.25rem; }
  .description { max-width: 38em; }
  .ph-demo-shell { max-width: 520px; justify-self: center; }
  .ph-demo { width: 100%; min-width: 0; }
  .capability-card { padding: 24px; }
  .capability-card h3 { font-size: 1.25rem !important; }
  .demo-body { grid-template-columns: .8fr 1.2fr; }
  .demo-prompt { padding: 24px; }
  .about-section { grid-template-columns: 1fr; }
  .about-card { width: 100%; max-width: 430px; }
  footer { grid-template-columns: 1fr auto; }
  footer > p { grid-column: 1 / -1; justify-self: start; }
}