/* ============================================================================
   /designcraft/ — газетная бумага и зелёный DesignCraft.
   Красный — только у знака переполнения: в вёрстке это единственный цвет,
   который означает «здесь проблема», и больше он нигде не нужен.
   ========================================================================= */

.pb-landing.lp-designcraft {
  --lp-primary:   #42680e;
  --lp-secondary: #3f6410;
  --lp-accent:    #a83208;
  --lp-glow:      rgba(66, 104, 14, .26);
  --lp-glow2:     rgba(168, 50, 8, .14);
  --lp-bg:        #f5f3ec;
  --lp-surface:   #ffffff;
  --lp-border:    rgba(29, 31, 23, .14);
  --lp-text:      #1d1f17;
  --lp-muted:     #525548;
  --lp-wave:      #e9e6da;
  --lp-shadow:    0 10px 30px rgba(50, 45, 20, .10);
}
.pb-landing.lp-designcraft .lp-grid { opacity: .35; }

/* ── Стенд ──────────────────────────────────────────────────────────────── */
.dcd { display: grid; gap: 14px; }
.dcd__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.dcd__lbl { font-size: .82rem; font-weight: 600; color: var(--lp-muted); margin-right: 6px; }
.dcd__seg { display: inline-flex; align-items: center; }
.dcd__segbtn {
  min-width: 40px; min-height: 40px; padding: 0 12px; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--lp-text); background: #fff; border: 1.5px solid var(--lp-border); margin-left: -1.5px;
}
.dcd__segbtn:first-of-type { border-radius: 10px 0 0 10px; }
.dcd__segbtn:last-of-type { border-radius: 0 10px 10px 0; }
.dcd__segbtn[aria-checked="true"] { position: relative; background: var(--lp-primary); border-color: var(--lp-primary); color: #fff; }
.dcd__range { display: inline-flex; align-items: center; gap: 8px; }
.dcd__range input { width: 130px; accent-color: var(--lp-primary); }
.dcd__out { min-width: 3.4em; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dcd__check { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; cursor: pointer; }
.dcd__check input { width: 18px; height: 18px; accent-color: var(--lp-primary); }
.dcd__page-btn {
  margin-left: auto; min-height: 42px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--lp-text); background: #fff; border: 1.5px solid var(--lp-border);
}
.dcd__page-btn.is-hot { border-color: var(--lp-accent); color: var(--lp-accent); box-shadow: 0 0 0 3px rgba(168, 50, 8, .12); }

/* Полосы: лист А4 на «монтажном столе» серого цвета, как в программе. */
.dcd__spread {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
  padding: 22px; border-radius: 14px; background: #6f6f6f;
}
.dcd__sheet {
  position: relative; width: min(100%, 380px); aspect-ratio: 1 / 1.414;
  /* Поля в px, а не в %: проценты padding считаются от ширины РОДИТЕЛЯ
     (стола), и на широком экране поля съедали половину листа. */
  padding: 24px 24px 30px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; font-family: 'Georgia', 'PT Serif', serif; color: #1a1a1a;
}
.dcd__sheet[hidden] { display: none; }
.dcd__mast { border-bottom: 2px solid #1a1a1a; margin-bottom: 8px; }
.dcd__mast-t { margin: 0; font-size: clamp(1.1rem, 4.4vw, 1.6rem); font-weight: 700; line-height: 1.05; }
.dcd__mast-i { margin: 2px 0 4px; font: .6rem/1.3 system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #555; }
.dcd__frame {
  flex: 1; min-height: 0; overflow: hidden; column-gap: 12px; column-fill: auto; column-rule: 1px solid #ddd;
  font-size: 1em; outline: 1px dashed rgba(74, 115, 16, .35); outline-offset: 2px;
}
/* Базовый кегль стенда — 14 «пунктов» = .6rem листа: лист маленький. */
.dcd__sheet { font-size: .6rem; }
.dcd__frame.is-justify { text-align: justify; hyphens: auto; }
/* Заголовок — на все колонки, как в газете: в узкой колонке он не помещается. */
.dcd__head { margin: 0 0 .4em; font-size: 1.45em; line-height: 1.15; column-span: all; }
.dcd__p { margin: 0 0 .5em; line-height: 1.35; text-indent: 1.2em; }
.dcd__p.is-cont { text-indent: 0; }
/* В одну колонку фото стоит справа и текст его обтекает; в узких колонках
   обтекать нечем — фото встаёт на всю ширину колонки, как в газете. */
.dcd__photo {
  width: 100%; aspect-ratio: 4 / 3; margin: .2em 0 .6em; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #8fb8de 0 55%, #6f9a4b 55% 100%);
}
.dcd__frame[data-cols="1"] .dcd__photo { float: right; width: 52%; margin: .2em 0 .5em .8em; }
.dcd__photo-sun { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; top: 14%; right: 16%; background: #ffe9a3; }
.dcd__photo::after {
  content: ''; position: absolute; inset: auto 0 18% 0; height: 30%;
  background: linear-gradient(135deg, transparent 0 30%, #4b6b38 30% 52%, transparent 52%), linear-gradient(225deg, transparent 0 40%, #5b7f43 40% 62%, transparent 62%);
}
.dcd__end { display: inline-block; width: 1px; height: 1px; }
.dcd__overset {
  position: absolute; right: 18px; bottom: 22px; width: 16px; height: 16px; display: grid; place-items: center;
  font: 700 14px/1 system-ui, sans-serif; color: #fff; background: var(--lp-accent); border-radius: 2px;
}
.dcd__overset[hidden] { display: none; }
.dcd__folio { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; font: .55rem system-ui, sans-serif; color: #777; }