/* /cursive-calligraphy/ only: alphabet charts, word-to-trace-sheet form, and practice word links.
   Screen-only, layered on assets/site-ui.css without changing it. */
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/library/pinyon-script.woff2") format("woff2"); }
@font-face { font-family: "Petit Formal Script"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/library/petit-formal-script.woff2") format("woff2"); }
@font-face { font-family: "Great Vibes"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/library/great-vibes.woff2") format("woff2"); }
@font-face { font-family: "Italianno"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/library/italianno.woff2") format("woff2"); }
@font-face { font-family: "Alex Brush"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/library/alex-brush.woff2") format("woff2"); }

@media screen {
  .calligraphy-page :is(#calligraphy-alphabet, #practice-sheet, .calligraphy-chart) { scroll-margin-top: 88px; }

  /* Alphabet charts: image beside its caption and actions, stacked on phones. */
  .calligraphy-charts { display: grid; gap: 28px; margin-top: 20px; }
  .calligraphy-chart { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 24px; align-items: start; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); }
  .calligraphy-chart img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: #f7f2e8; }
  .calligraphy-chart-info { display: grid; gap: 14px; align-content: start; }
  .calligraphy-chart-text { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
  .calligraphy-chart-text strong { display: block; margin-bottom: 4px; color: var(--ink); font: italic 700 20px/1.3 Georgia, serif; }
  .calligraphy-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .calligraphy-page .calligraphy-actions .secondary-button { width: auto; text-decoration: none; }

  /* Word-to-trace-sheet form. The preview keeps the warm paper of the exports. */
  .calligraphy-sheet { display: grid; gap: 16px; max-width: 920px; margin-top: 20px; }
  .calligraphy-sheet-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
  .calligraphy-field { display: grid; gap: 6px; }
  .calligraphy-field label { font-weight: 600; font-size: 15px; }
  .calligraphy-field :is(input, select) { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
  .calligraphy-field :is(input, select):focus-visible { border-color: var(--accent); }
  .calligraphy-preview { display: flex; align-items: center; justify-content: center; min-height: 150px; margin: 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 6px; background: #f7f2e8; color: var(--ink); font: 64px/1.25 "Pinyon Script", cursive; text-align: center; overflow-wrap: anywhere; }
  .calligraphy-preview.is-placeholder { color: var(--muted); }
  .calligraphy-hint { margin: 0; color: var(--muted); font-size: 14px; }
  .calligraphy-hint.is-error { color: #a2361f; font-weight: 600; }
  .calligraphy-sheet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .calligraphy-page .calligraphy-sheet-actions .secondary-button { width: auto; }
  .calligraphy-text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; }
  .calligraphy-text-link[aria-disabled="true"] { color: var(--muted); pointer-events: none; text-decoration: none; }
  .calligraphy-notes { max-width: 920px; }

  /* Practice words: the original card plus a separate trace-sheet link (no nested links). */
  .calligraphy-word { display: grid; align-content: start; }
  .calligraphy-word .feature { min-height: 0; }
  .calligraphy-trace-link { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 14px; font-weight: 600; }

  @media (max-width: 760px) {
    .calligraphy-chart { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 18px; }
    .calligraphy-sheet-fields { grid-template-columns: minmax(0, 1fr); }
    .calligraphy-preview { min-height: 112px; font-size: 44px; }
  }
}