/* ПК — разворот «на кухонному столі»: текст и живая коробка рядом, лента из трёх кадров, рецепт и піца */
.d{max-width:1280px;margin:0 auto;padding:0 48px}
.d-top{display:flex;justify-content:space-between;align-items:center;padding:26px 0 0}
.d-top-r{display:flex;align-items:center;gap:14px}
.d-top .lang-sw{margin:-12px -8px -12px 0}
.d-top-host{font-size:13px;color:var(--ink2)}
.d h1{font:700 clamp(46px,4.6vw,66px)/1.03 var(--serif);letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}
.d h2{font:700 clamp(30px,2.8vw,40px)/1.1 var(--serif);margin:0 0 14px;text-wrap:balance}
.d h2.hand{font-family:var(--hand);font-weight:400}
.d p{margin:0 0 14px}

.d-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center;min-height:min(88vh,820px);padding:28px 0 40px}
.d-hook{font-size:26px;line-height:1.3;color:var(--berry-d);transform:rotate(-1.5deg);transform-origin:left;margin-bottom:18px!important}
.d-proof{font-size:18px;color:var(--ink2);max-width:34em;margin-bottom:26px!important}

/* ярлычки на нитке над рамой */
.d-stage{position:relative}
/* четыре ярлычка без переноса шире колонки при 1180 (WebKit iPad: скролл 3 px) — кегль и поля тянутся с шириной окна */
.d-tags{position:relative;display:flex;justify-content:space-around;align-items:flex-start;padding:0 4px;height:74px}
.d-string{position:absolute;left:0;top:0;width:100%;height:40px;overflow:visible;pointer-events:none}
.d-string path{fill:none;stroke:var(--ink2);stroke-width:1.6;stroke-dasharray:1 0;filter:url(#f-pencil)}
.d .tag{position:relative;margin-top:16px;font:700 clamp(12px,1.1vw,14px)/1.1 var(--sans);color:#3b2a23;background:#fffaf0;border:2px solid #3b2a23;
  padding:10px 10px 10px 24px;border-radius:4px 10px 10px 4px;white-space:nowrap;cursor:pointer;transform-origin:50% -14px;
  box-shadow:0 6px 14px -8px rgba(40,20,10,.55);transition:transform .25s ease, background .2s}
.d .tag::before{content:"";position:absolute;left:7px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;border:2px solid #3b2a23;background:var(--paper)}
.d .tag::after{content:"";position:absolute;left:11px;top:-16px;width:2px;height:20px;background:var(--ink2);transform:rotate(8deg)}
.d .tag:nth-child(2){transform:rotate(-4deg)}.d .tag:nth-child(3){transform:rotate(3deg);margin-top:24px}
.d .tag:nth-child(4){transform:rotate(-2deg);margin-top:24px}.d .tag:nth-child(5){transform:rotate(4deg)}
.d .tag:hover{transform:rotate(0) translateY(2px)}
.d .tag[aria-pressed=true]{background:var(--butter)}

.d-frame{position:relative;height:clamp(440px,58vh,600px);background:var(--frame);border-radius:26px 30px 24px 34px;padding:14px;
  box-shadow:0 30px 60px -30px rgba(40,20,10,.7)}
.d-frame-brush{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);pointer-events:none;overflow:visible}
.d-frame-brush path{fill:none;stroke:var(--berry);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-width:7;stroke-linejoin:round;opacity:.35;filter:url(#f-rough)}
.d-frame iframe{position:relative;z-index:1;display:block;width:100%;height:100%;border:0;border-radius:16px;background:#15181d;opacity:0;transition:opacity .6s}
.d-frame.ready iframe{opacity:1}
.d-frame-wait{position:absolute;inset:14px;display:grid;place-items:center;border-radius:16px;color:#f1e4cf;font-size:24px;
  background:radial-gradient(70% 60% at 50% 45%,#3b3530,#15181d)}
.d-under{display:flex;align-items:flex-start;gap:10px;margin:14px 0 4px 6%}
.d-arrow{width:64px;height:48px;flex:none;transform:scaleY(-1) translateY(-6px)}
.d-arrow path{fill:none;stroke:var(--berry-d);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:url(#f-pencil)}
.d-state{font-size:22px;line-height:1.3;color:var(--berry-d);margin:8px 0 0!important;min-height:1.4em}
.d-dims{font-size:13px;color:var(--ink2);margin:6px 0 0 6%!important}

/* лента из трёх кадров */
.d-story{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding:56px 0}
.d-panel{margin:0;background:color-mix(in srgb,#fffaf0 82%,var(--paper));border-radius:8px;padding:18px 18px 12px;
  box-shadow:0 18px 34px -22px rgba(40,20,10,.6)}
.d-panel:nth-child(1){transform:rotate(-1.4deg)}.d-panel:nth-child(2){transform:rotate(.9deg) translateY(14px)}.d-panel:nth-child(3){transform:rotate(-.6deg)}
.d-panel figcaption{font-size:22px;color:#3b2a23;margin-top:8px;display:flex;align-items:center;gap:10px}
.d-panel figcaption b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--butter);color:#3b2a23;font-weight:400}
@media (prefers-color-scheme: dark){.d-panel{background:#3a2c24}.d-panel figcaption{color:var(--ink)}}

/* ролик 16:9 */
.d-film{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center;padding:56px 0}
.d-vid{position:relative;margin:0;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--paper2);
  box-shadow:0 26px 50px -28px rgba(40,20,10,.7);transform:rotate(-.6deg)}
.d-vid video{display:block;width:100%;height:100%;object-fit:cover}
.d .vbtn{position:absolute;right:18px;bottom:18px;width:64px;height:64px;border-radius:50%;border:0;background:var(--cta);color:var(--cta-ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.d .vbtn svg{width:28px;height:28px}
.d .vbtn.on svg path{d:path("M7 5h4v14H7zM13 5h4v14h-4z")}
.d-film-copy p{font-size:18px;color:var(--ink2)}
.d-yours{font-size:21px!important;color:var(--berry-d)!important}

/* рецепт и піца */
.d-kitchen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center;padding:56px 0}
.d-card{position:relative;background:#fffaf0;color:#3b2a23;border-radius:6px;padding:34px 34px 22px;transform:rotate(-1deg);
  box-shadow:0 22px 40px -24px rgba(40,20,10,.6);}
.d-card::before{content:"";position:absolute;top:-14px;left:40px;width:130px;height:30px;transform:rotate(-4deg);
  background:color-mix(in srgb,var(--butter) 65%,transparent);filter:url(#f-rough)}
.d-card h2{color:#9e2a4c}
.d-card dl{margin:0}
.d-card dl>div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:8px 0;font-size:16px;line-height:1.4;border-bottom:1px solid rgba(143,176,207,.55)}
.d-card dt{font-weight:700}.d-card dd{margin:0}
.d-pizza-art{width:300px;max-width:100%;margin:0 0 8px -6px}
.d-pizza p{color:var(--ink2);font-size:17px}

.d-final{text-align:center;padding:72px 0 40px}
.d-final h2{font-size:clamp(36px,3.6vw,52px)}
.d-final p{color:var(--ink2);font-size:18px;max-width:36em;margin:0 auto 26px!important}
.d-foot{text-align:center;font-size:12px;color:var(--ink2);padding:24px 0 30px}

.d .scene:focus-visible{outline-offset:6px}
@media (prefers-reduced-motion: reduce){.tag{transition:none}}
@media (max-width:1100px){.d{padding:0 32px}.d-hero{gap:36px}.d-card dl>div{grid-template-columns:150px 1fr}}
/* планшет (761–1100, data-layout=tablet): iPad получает эту разметку, а не телефонную — герой в одну колонку,
   ярлыки размеров не вылезают за край (было: горизонтальный скролл 82 px на iPad 820) */
@media (max-width:960px){
  html[data-layout=tablet] .d-hero{grid-template-columns:minmax(0,1fr);min-height:0;gap:28px}
}
html[data-layout=tablet] .d-tags{flex-wrap:wrap;height:auto;min-height:74px;row-gap:6px}