/* Три страницы: почерк, сравнение и проект. Общие компоненты не переопределяются. */
.w3-hero { padding: clamp(56px, 7vw, 100px) 0 72px; }
.w3-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.w3-split > * { min-width: 0; }
.w3-hero h1 { margin-top: 18px; }
.w3-hero .lead { max-width: 46ch; }
.w3-path { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 28px; font-size: 14px; }
.w3-desk { background: var(--desk); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow-1); }
.w3-sheet { position: relative; background: var(--sheet); color: var(--on-sheet); box-shadow: var(--shadow-2); border-radius: 4px 8px 12px 4px; }
.w3-sheet::after { content: ""; position: absolute; inset: 6px -5px -6px 6px; z-index: -1; background: var(--sheet-edge); border-radius: inherit; }
.w3-caption { font-size: 13px; color: var(--muted); margin-top: 18px; }
.w3-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 42px; }
.w3-three p { margin-top: 12px; color: var(--muted); }
.w3-num { display: block; font: 600 2.6rem/1 var(--hand); color: var(--accent); margin-bottom: 18px; }
.w3-end { padding: 76px 0; text-align: center; background: var(--stage); }
.w3-end .lead { margin-inline: auto; max-width: 52ch; }
.w3-end .cta-row { justify-content: center; }
.w3-note { margin-top: 26px; }
/* Альбом: подлинные образцы и одна вкладка выбора. */
.hw-album { padding-top: 30px; }
.hw-label { display: flex; justify-content: space-between; gap: 12px; padding: 0 22px 18px; font: 600 1.3rem/1 var(--hand); color: var(--pen-ink); }
.hw-picture { padding: 22px 16px; min-height: 230px; display: grid; align-items: center; background: repeating-linear-gradient(transparent 0 30px, var(--rule) 30px 31px); border-block: 1px solid var(--rule); }
.hw-picture img { width: 100%; height: auto; mix-blend-mode: multiply; filter: url(#inkify); }
.hw-album figcaption { font-size: 13px; padding: 16px 22px 22px; }
.hw-album figure { margin: 0; }
.hw-tabs { margin-top: 24px; }
.hw-tabs .chip { padding-inline: 13px; }
.hw-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.hw-lab { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; margin-top: 44px; align-items: start; }
.hw-draw-sheet { padding: 20px; }
.hw-draw-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; }
.hw-draw-title span { font: 400 2.6rem/1 var(--script); color: var(--pen-ink); }
.hw-pad { position: relative; margin-top: 12px; border: 1px solid var(--sheet-edge); border-radius: 4px; background: repeating-linear-gradient(transparent 0 49px, var(--rule) 49px 50px); }
#letterPad { display: block; width: 100%; height: auto; aspect-ratio: 2.5; touch-action: none; cursor: url('../img/nib-cursor.svg') 4 28, crosshair; }
.hw-pad-hint { position: absolute; inset: 0; display: grid; place-items: center; font: 400 6rem/1 var(--script); color: var(--pen-ink); opacity: .13; pointer-events: none; }
.hw-pad.has-ink .hw-pad-hint { display: none; }
.hw-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hw-tools .btn { flex-grow: 1; }
.hw-local { color: var(--on-sheet-muted); font-size: 13px; margin-top: 16px; }
.hw-draw-sheet .link-btn, .about-principles .w3-num { color: var(--pen-ink); }
.hw-variants { display: flex; gap: 10px; margin: 20px 0; }
.hw-variant { background: var(--sheet); border: 1px dashed var(--sheet-edge); border-radius: 6px; flex: 1; min-width: 0; padding: 8px; color: var(--on-sheet-muted); text-align: center; font-size: 12px; }
.hw-variant canvas { width: 100%; height: 64px; }
.hw-repeat { width: 100%; height: 112px; background: var(--sheet); border-radius: 5px; box-shadow: var(--shadow-1); }
.hw-status { min-height: 3.2em; font-size: 14px; color: var(--accent); margin-top: 16px; }
.hw-lab .field { margin: 24px 0 12px; }
.hw-lab .honest { margin-top: 20px; }
.hw-lab button:disabled { opacity: .55; cursor: default; }
/* Сравнение: таблица остаётся таблицей на любом экране. */
.cmp-result { padding: 30px; }
.cmp-result .hand { font-size: 1.4rem; color: var(--pen-ink); }
.cmp-result h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-block: 20px 14px; }
.cmp-result p + p { margin-top: 14px; }
.cmp-result .cmp-caveat { padding-top: 16px; margin-top: 20px; border-top: 1px solid var(--sheet-edge); font-size: 14px; }
.cmp-choices { margin-top: 26px; }
.cmp-choices .chip { min-height: 44px; padding-block: 8px; text-align: left; }
.cmp-scroll { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); margin-top: 36px; }
.cmp-ways { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 14px; }
.cmp-ways caption { text-align: left; padding: 20px; color: var(--muted); background: var(--paper); }
.cmp-ways th, .cmp-ways td { padding: 20px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); width: 21%; }
.cmp-ways th:first-child { width: 16%; }
.cmp-ways thead { background: var(--accent-soft); }
.cmp-ways thead th { font-size: 16px; }
.cmp-ways tbody th { font-weight: 700; background: var(--paper); }
.cmp-ways .cmp-fit { background: var(--accent-soft); }
.cmp-ways strong { display: block; color: var(--accent); margin-bottom: 5px; }
.cmp-scroll:focus-visible { outline-offset: 4px; }
.cmp-honesty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.cmp-honesty p { color: var(--muted); margin-top: 12px; }
/* О проекте: записка автора и маршрут данных. */
.about-letter { padding: 34px; transform: rotate(1deg); }
.about-letter::after { inset: auto -5px -6px 6px; height: 6px; }
.about-letter .hand { font-size: 1.9rem; line-height: 1.3; color: var(--pen-ink); }
.about-letter .hand + p { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--sheet-edge); }
.about-sign { display: block; font: 400 2.2rem/1 var(--script); margin-top: 24px; color: var(--pen-ink); }
.about-kicker { color: var(--on-sheet-muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 24px; }
.about-principles .note { height: 100%; }
.about-principles .note p { color: var(--on-sheet); }
.about-data { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; margin-top: 40px; }
.about-data-choices { display: grid; gap: 10px; }
.about-data-choices .chip { text-align: left; border-radius: 12px; min-height: 58px; padding: 14px 18px; }
.about-route { padding: 30px; }
.about-route .route-tag { display: inline-block; font: 600 1.4rem/1 var(--hand); color: var(--pen-ink); padding-bottom: 16px; }
.about-route h3 { margin-bottom: 16px; }
.about-route p + p { margin-top: 16px; }
.about-route .route-boundary { border-top: 1px solid var(--sheet-edge); padding-top: 18px; margin-top: 22px; font-size: 14px; }
.about-five { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.about-five a { border-bottom: 1px solid var(--line); padding: 6px 0; text-decoration: none; margin-right: 12px; }
@media (max-width: 960px) {
  .w3-split { grid-template-columns: 1fr; gap: 40px; }
  .w3-hero h1 { max-width: 14ch; }
  .w3-desk { max-width: 680px; width: 100%; }
  .hw-lab, .about-data { grid-template-columns: 1fr 1fr; gap: 24px; }
  .w3-three { gap: 16px; }
}
@media (max-width: 700px) {
  .w3-hero { padding-block: 48px 56px; }
  .w3-three, .hw-lab, .about-data, .cmp-honesty { grid-template-columns: 1fr; }
  .w3-three { gap: 24px; }
  .hw-picture { min-height: 160px; }
  .hw-label { font-size: 1.15rem; }
  .w3-desk { padding: 20px 16px; }
  .cmp-result, .about-letter, .about-route { padding: 26px 22px; }
  .about-letter { transform: none; }
  .about-letter .hand { font-size: 1.65rem; }
  .hw-lab { gap: 32px; }
  .hw-tabs { gap: 7px; }
  .w3-end { padding-block: 56px; }
}
@media (prefers-reduced-motion: reduce) { .about-letter { transform: none; } }