/* Speaking material. Uses the site tokens from /assets/tokens.css (v7 paper, graphite, line, mono; Oswald + Inter). */
.talk{--talk-accent:#8f2a1d;--talk-measure:68ch;max-width:1180px;margin:0 auto;padding:0 40px 40px}
.talk p,.talk li{max-width:var(--talk-measure)}
.talk-hero{padding:72px 0 56px;border-bottom:1px solid var(--v7-line);display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);gap:56px;align-items:end}
.talk-hero h1{max-width:13ch;font-size:clamp(46px,6.4vw,96px);margin-bottom:28px;text-wrap:balance}
.talk-hero .lead{max-width:34ch;margin-bottom:28px}
.talk-question{font-size:20px;line-height:1.45;max-width:46ch;border-inline-start:3px solid var(--talk-accent);padding-inline-start:18px;margin:0 0 28px}
.talk-meta{display:flex;flex-wrap:wrap;gap:6px 22px;font:12px/1.6 var(--v7-mono);color:var(--v7-muted);margin:0;padding:0;list-style:none}
.talk-meta li{margin:0}
.talk-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* Hero actions sit right under the lead, above the fixed assistant/language docks at common window heights. */
.talk-hero .talk-actions{margin:0 0 32px}
.talk-actions .action,.talk-actions .secondary,.talk-actions button{min-height:48px}
.talk-actions button{border:1px solid var(--v7-graphite);font-size:15px;padding:12px 20px}
.talk-frame{font:12px/1.6 var(--v7-mono);color:var(--v7-muted);border-top:1px solid var(--v7-line);padding-top:18px}
.talk-frame p{margin-bottom:12px}
.lang-note{font:13px/1.5 var(--v7-mono);background:var(--v7-graphite);color:var(--v7-paper);padding:12px 16px;margin:24px 0 0;max-width:none}
.talk-toc{padding:40px 0;border-bottom:1px solid var(--v7-line)}
.talk-toc h2{font-size:14px;font-family:var(--v7-mono);letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px;font-weight:500}
.talk-toc ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;counter-reset:toc}
.talk-toc li{margin:0;border-top:1px solid var(--v7-line);counter-increment:toc;max-width:none}
.talk-toc a{display:flex;gap:16px;align-items:baseline;min-height:48px;padding:10px 0;text-decoration:none}
.talk-toc a::before{content:counter(toc,decimal-leading-zero);font:11px var(--v7-mono);color:var(--v7-muted)}
.talk-toc a:hover span,.talk-toc a:focus-visible span{text-decoration:underline}
.talk-section{padding:72px 0;border-bottom:1px solid var(--v7-line);display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px}
.talk-section>header{all:unset;display:block}
.talk-section>header .eyebrow{margin-bottom:10px}
.talk-section h2{font-size:clamp(30px,3.4vw,48px);max-width:18ch;margin-bottom:28px}
.talk-section h3{font-size:22px;margin:36px 0 12px}
.talk-body>p:first-of-type{font-size:20px;line-height:1.5}
.status{display:inline-block;font:11px/1.4 var(--v7-mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;padding:4px 8px;margin:0 0 18px}
.status-fact{color:var(--v7-graphite)}
.status-concept{color:var(--talk-accent)}
.status-training{color:var(--v7-muted);border-style:dashed}
.talk-quote{margin:28px 0;padding:0 0 0 20px;border-inline-start:3px solid var(--v7-graphite);font-size:19px;line-height:1.5;max-width:60ch}
.talk-quote p{margin-bottom:10px}
.talk-quote cite{display:block;font:12px/1.5 var(--v7-mono);font-style:normal;color:var(--v7-muted)}
.takeaway{margin:32px 0 0;padding:18px 20px;background:color-mix(in srgb,var(--v7-graphite) 6%,var(--v7-paper));border-inline-start:3px solid var(--talk-accent);max-width:var(--talk-measure)}
.takeaway strong{display:block;font:11px/1.4 var(--v7-mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;color:var(--talk-accent)}
.takeaway p{margin:0}
/* Diagrams: exact HTML, readable without images. */
.chain{list-style:none;padding:0;margin:28px 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;counter-reset:chain;max-width:none}
.chain li{margin:0;padding:14px 12px 14px 0;border-top:2px solid var(--v7-graphite);position:relative;counter-increment:chain;max-width:none}
.chain li::before{content:counter(chain);display:block;font:11px var(--v7-mono);color:var(--v7-muted);margin-bottom:6px}
.chain b{display:block;font-weight:600;font-size:16px}
.chain span{display:block;font-size:14px;line-height:1.4;color:var(--v7-muted);margin-top:4px}
.keytable{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.keytable caption{text-align:start;font:12px/1.5 var(--v7-mono);color:var(--v7-muted);padding-bottom:10px;caption-side:top}
.keytable th,.keytable td{border-top:1px solid var(--v7-line);padding:10px 12px 10px 0;text-align:start;vertical-align:top}
.keytable thead th{font:11px/1.4 var(--v7-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--v7-muted);font-weight:400}
.keytable code,.signature-line{font:13px/1.5 var(--v7-mono);overflow-wrap:anywhere}
.flow{list-style:none;padding:0;margin:28px 0;max-width:none;display:grid;gap:0}
.flow li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;border-top:1px solid var(--v7-line);padding:14px 0;margin:0;max-width:none}
.flow li>span:first-child{font:12px/1.5 var(--v7-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--v7-muted)}
.flow li.is-human>span:first-child{color:var(--talk-accent)}
.questions{list-style:none;padding:0;margin:24px 0;counter-reset:q;max-width:none}
.questions li{counter-increment:q;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;border-top:1px solid var(--v7-line);padding:16px 0;margin:0;max-width:none}
.questions li::before{content:counter(q);font:600 28px/1 var(--font-display);color:var(--talk-accent)}
.questions b{display:block;font-size:19px;margin-bottom:4px}
/* Worksheet */
.worksheet{margin-top:40px;padding:28px;border:1px solid var(--v7-graphite);max-width:820px}
.worksheet h3{margin-top:0}
.ws-field{display:block;margin:0 0 22px}
.ws-field label{display:block;margin-bottom:8px}
.ws-q{display:block;font-weight:600;font-size:17px}
.ws-hint{display:block;font-size:14px;color:var(--v7-muted);margin-top:2px}
.ws-field textarea{display:block;width:100%;min-height:96px;font:16px/1.5 var(--font-body);color:var(--v7-graphite);background:#fbfaf6;border:1px solid var(--v7-muted);padding:10px 12px;resize:vertical}
.ws-field textarea:focus-visible,.ws-remember input:focus-visible{outline:3px solid var(--v7-graphite);outline-offset:2px}
.ws-privacy{font:13px/1.5 var(--v7-mono);color:var(--v7-muted);margin:4px 0 12px}
.ws-remember{display:flex;gap:12px;align-items:center;min-height:44px;font-size:15px;cursor:pointer}
.ws-remember input{width:22px;height:22px;accent-color:var(--v7-graphite)}
.ws-remember.is-disabled{opacity:.6;cursor:not-allowed}
.ws-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ws-buttons button{border:1px solid var(--v7-graphite);font-size:15px;min-height:44px;padding:10px 16px}
.ws-status{font:13px/1.5 var(--v7-mono);min-height:1.5em;margin:12px 0 0}
.ws-js-only{display:none}
.speaking-js .ws-js-only{display:revert}
.speaking-js .ws-buttons.ws-js-only{display:flex}
.example{margin-top:36px;padding-top:4px}
.example dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.example dt{font-weight:600;border-top:1px solid var(--v7-line);padding-top:12px;margin-top:4px}
.example dd{margin:4px 0 12px;max-width:var(--talk-measure)}
.sources{font-size:15px}
.sources li{margin-bottom:10px;overflow-wrap:anywhere}
.related{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px 24px;max-width:none}
.related a{display:inline-flex;align-items:center;min-height:44px}
.talk-footer{max-width:1180px;margin:0 auto;padding:32px 40px 96px;display:flex;flex-wrap:wrap;gap:12px 40px;font:12px/1.6 var(--v7-mono);border-top:1px solid var(--v7-line)}
.talk-footer a{display:inline-flex;align-items:center;min-height:44px}
/* Stage: without JS the screens are a list after the material (a display:none target cannot be scrolled to); with JS a 16:9 dialog. */
.stage{display:none}
.stage-nojs-title{display:none}
/* Site-wide smooth scrolling aims at the pre-font-swap offset and overshoots #stage-N on load; an instant jump stays anchored. */
html:not(.speaking-js){scroll-behavior:auto}
html:not(.speaking-js) .stage{display:block;padding:40px clamp(16px,4vw,40px);background:#141512;color:#f0ede5}
html:not(.speaking-js) .stage-nojs-title{display:block;max-width:1100px;margin:0 auto 24px;font:600 28px/1.2 var(--font-display)}
html:not(.speaking-js) .stage .stage-frame{width:auto;max-width:1100px;margin:0 auto;aspect-ratio:auto;container-type:normal}
html:not(.speaking-js) .stage .stage-bar{display:none}
html:not(.speaking-js) .stage .stage-slide{display:block;border:1px solid #55564f;margin-bottom:24px;padding:clamp(20px,4vw,40px);box-sizing:border-box;scroll-margin-top:24px;overflow-wrap:anywhere}
/* Without JS the screens are read, not projected: normal flow and fixed type instead of the 16:9 frame and cqh sizes. */
html:not(.speaking-js) .stage .stage-slide .stage-kicker{font:13px/1.4 var(--v7-mono);margin:0 0 12px}
html:not(.speaking-js) .stage .stage-slide h2{font-size:clamp(24px,4vw,40px);line-height:1.1;margin:0 0 16px}
html:not(.speaking-js) .stage .stage-slide p{font-size:clamp(17px,2vw,20px);line-height:1.45;margin:0 0 12px}
html:not(.speaking-js) .stage .stage-slide .stage-mark{font:12px/1.4 var(--v7-mono);padding:4px 8px;margin:0 0 14px}
html:not(.speaking-js) .stage .stage-slide .stage-big{font-size:clamp(40px,8vw,72px);margin:0 0 12px}
html:not(.speaking-js) .stage .stage-row{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:12px}
html:not(.speaking-js) .stage .stage-row li{flex:1 1 180px;border-top:2px solid #f0ede5;padding-top:10px;font-size:17px;line-height:1.35}
html:not(.speaking-js) .stage .stage-row li::before{font:12px var(--v7-mono);margin-bottom:4px}
.speaking-js .stage{display:none;padding:0}
.speaking-js .stage.is-open{display:flex;position:fixed;inset:0;z-index:2147483000;background:#141512;color:#f0ede5;flex-direction:column;align-items:center;justify-content:center}
.stage-on body{overflow:hidden}
.stage-on .assistant-launcher,.stage-on [class*="assistant"],.stage-on .language-dock,.stage-on .media-pause{visibility:hidden!important}
.stage-frame:focus{outline:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ws-print-answer{display:none}
.stage-frame{width:min(100vw,calc((100vh - 64px) * 16 / 9));aspect-ratio:16/9;position:relative;container-type:size}
.speaking-js .stage-slide{position:absolute;inset:0;padding:6cqh 7cqw;display:flex;flex-direction:column;justify-content:center;border:0;margin:0;aspect-ratio:auto;outline:none}
.speaking-js .stage-slide[hidden]{display:none}
/* The slide receives focus only to route keys; no ring on the projected image. Controls keep visible focus. */
.stage-slide:focus,.stage-slide:focus-visible{outline:none;box-shadow:none}
.stage-kicker{font:2.6cqh/1.3 var(--v7-mono);letter-spacing:.08em;text-transform:uppercase;color:#bdb9ad;margin:0 0 3.5cqh}
.stage-slide h2{font-family:var(--font-display);font-weight:600;font-size:9.6cqh;line-height:1.02;letter-spacing:-.02em;max-width:22ch;margin:0 0 4cqh;text-wrap:balance}
.stage-slide p{font-size:4.2cqh;line-height:1.3;max-width:40ch;margin:0 0 2cqh}
.stage-slide .stage-mark{font:2.4cqh/1.3 var(--v7-mono);color:#d9a99f;border:1px solid currentColor;display:inline-block;padding:.6cqh 1.2cqh;margin:0 0 3cqh;align-self:flex-start}
.stage-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2cqw;margin-top:2cqh;list-style:none;padding:0;counter-reset:st}
.stage-row li{border-top:.5cqh solid #f0ede5;padding-top:2cqh;font-size:3.6cqh;line-height:1.25;margin:0;max-width:none;counter-increment:st}
.stage-row li::before{content:counter(st);display:block;font:2.2cqh var(--v7-mono);color:#bdb9ad;margin-bottom:1cqh}
.stage-row.is-plain li::before{content:none}
.stage-slide .stage-big{font-family:var(--font-display);font-size:16cqh;line-height:1;font-weight:600;margin:0 0 3cqh}
.stage-bar{width:min(100vw,calc((100vh - 64px) * 16 / 9));display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:56px;font:14px var(--v7-mono);color:#f0ede5}
.stage-bar button{color:#f0ede5;border:1px solid #8a877d;background:transparent;min-height:44px;min-width:44px;padding:8px 14px;font:14px var(--v7-mono)}
.stage-bar button:disabled{opacity:.4;cursor:default}
.stage-bar button:focus-visible{outline:3px solid #f0ede5;outline-offset:2px}
.stage-bar [data-stage-counter]{margin-inline:8px 0}
.stage-bar .stage-hint{color:#bdb9ad;font-size:12px;margin-inline:auto 12px}
@media (max-width:900px){
 .talk-hero{grid-template-columns:minmax(0,1fr);gap:24px}
 .talk-section{grid-template-columns:minmax(0,1fr);gap:8px}
 .chain{grid-template-columns:repeat(3,minmax(0,1fr))}
 .chain li:nth-child(n+4){border-top-width:1px}
}
@media (max-width:768px){
 .talk{padding:0 20px 32px}
 .talk-hero{padding:40px 0 36px}
 .talk-hero h1{font-size:clamp(40px,11vw,56px);max-width:none}
 .talk-question{font-size:18px}
 .talk-toc ol{grid-template-columns:minmax(0,1fr)}
 .talk-section{padding:48px 0}
 .talk-section h2{font-size:30px}
 .talk-body>p:first-of-type{font-size:18px}
 .chain{grid-template-columns:minmax(0,1fr)}
 .chain li{display:grid;grid-template-columns:28px minmax(0,1fr);border-top-width:1px;padding:10px 0}
 .chain li::before{margin:2px 0 0}
 .chain li b,.chain li span{grid-column:2}
 .flow li{grid-template-columns:minmax(0,1fr);gap:4px}
 .keytable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .keytable tr{display:block;border-top:1px solid var(--v7-line);padding:8px 0}
 .keytable th,.keytable td{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;border:0;padding:4px 0}
 .keytable th[scope=row]{display:block;padding-bottom:2px}
 .keytable td::before{content:attr(data-label);font:11px/1.6 var(--v7-mono);text-transform:uppercase;color:var(--v7-muted)}
 .worksheet{padding:18px}
 .talk-footer{padding:24px 20px 96px}
 .stage-bar .stage-hint{display:none}
}
/* Site docks step aside while they would cover a hero action (class set by speaking.js from measured geometry). */
html.speaking-docks-yield .language-dock:not([aria-expanded="true"]){visibility:hidden;opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.language-dock{transition:opacity .2s ease,visibility .2s}}
@media (prefers-reduced-motion:reduce){.talk *{scroll-behavior:auto;transition:none!important;animation:none!important}}
/* Short windows: the fixed assistant (bottom left) and language (bottom right) docks take the last ~95px of the viewport.
   Tighter hero spacing keeps the hero actions above them; checked in check_speaking. */
@media (max-height:780px){.talk-hero{padding-top:28px}.talk-hero .eyebrow{margin-bottom:14px}.talk-hero h1{margin-bottom:14px}.talk-hero .lead{margin-bottom:18px}}
@media (max-height:780px) and (max-width:700px){.talk-hero{padding-top:20px}.talk-hero h1{font-size:clamp(34px,9.5vw,48px)}.talk-hero .lead{font-size:19px;line-height:1.3}}

@media print{
 @page{size:A4;margin:16mm 16mm 18mm}
 html,body{background:#fff!important;color:#000!important}
 body{font-size:11pt;line-height:1.45}
 header,nav,.skip,.language-dock,#lang-panel,.media-pause,.talk-actions,.talk-toc,.ws-buttons,.ws-remember,.ws-privacy,.ws-status,.stage,.lang-note,[class*="assistant"],.talk-footer a[href^="/"]{display:none!important}
 .talk{max-width:none;padding:0}
 .talk-hero{display:block;padding:0 0 12pt}
 .talk-hero h1{font-size:30pt;max-width:none;margin-bottom:10pt}
 .talk-hero .lead{font-size:14pt}
 .talk-question{font-size:12pt}
 .talk-section{display:block;padding:14pt 0;border-color:#999}
 .talk-section h2{font-size:18pt;max-width:none;margin-bottom:8pt;break-after:avoid}
 .talk-section h3{font-size:13pt;break-after:avoid}
 .talk p,.talk li{max-width:none;orphans:3;widows:3}
 .takeaway,.talk-quote,.chain,.flow li,.questions li,.keytable tr,.ws-field,.example dt,.example dd{break-inside:avoid}
 .takeaway{background:none;border:1px solid #000;border-inline-start-width:3pt}
 .chain{grid-template-columns:repeat(3,1fr)}
 .worksheet{border:1px solid #000;padding:10pt}
 .ws-field textarea{min-height:34mm;border:1px solid #000;background:#fff;resize:none;font-size:11pt}
 .speaking-js .ws-field textarea.has-print-copy{display:none}
 .ws-print-answer{display:block;min-height:30mm;border:1px solid #000;padding:6pt 8pt;white-space:pre-wrap;overflow-wrap:anywhere;font:11pt/1.45 var(--font-body);break-inside:avoid}
 .sources a[href^="http"]::after{content:" — " attr(href);font-size:9pt;color:#333;overflow-wrap:anywhere}
 .status,.example>h3,.worksheet h3,.talk-section h3,.keytable caption{break-after:avoid}
 .keytable{break-inside:avoid}
 .talk-section:not(#model){break-before:page}
 .example{break-inside:avoid}
 .talk-footer span{display:block}
 .talk-footer{display:block;padding:12pt 0 0;max-width:none}
 html.print-worksheet .talk article>*:not(#questions),html.print-worksheet .talk-footer{display:none!important}
 html.print-worksheet #questions{display:block;border:0;padding:0}
 html.print-worksheet #questions .talk-body>*:not(.worksheet){display:none!important}
 html.print-worksheet #questions>header{display:none}
 html.print-worksheet .worksheet{border:0;padding:0;margin:0}
 html.print-worksheet #questions{break-before:auto}
 html.print-worksheet .ws-field{margin-bottom:10pt}
 html.print-worksheet .ws-field textarea{min-height:30mm}
 html.print-worksheet .worksheet h3::after{content:" · Пять вопросов перед запуском · kostina.online/speaking/from-idea-to-execution/";font:400 9pt var(--v7-mono)}
}
.speaking-js .stage-bar.ws-js-only{display:flex}