@font-face{font-family:Literata;src:url('assets/fonts/literata-latin.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:Literata;src:url('assets/fonts/literata-italic-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:Manrope;src:url('assets/fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0000-024F,U+1E00-1EFF,U+2000-206F}

@font-face{font-family:Manrope;src:url('assets/fonts/manrope-cyrillic.woff2') format('woff2');font-weight:200 800;font-display:swap;unicode-range:U+0400-052F,U+2DE0-2DFF,U+A640-A69F}

@font-face{font-family:Literata;src:url('assets/fonts/literata-cyrillic.woff2') format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0400-052F}

@font-face{font-family:Literata;src:url('assets/fonts/literata-italic-cyrillic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0400-052F}

/* PERFORMANCE-12 · пока шрифты в пути, Georgia/Arial в метриках Literata/Manrope (замер Chrome: ширина строк страницы, hhea 1177/308 из 1000 и 2132/600 из 2000): заголовок не прыгает при подмене. Только буквы: значки и прочие знаки остаются прежним запасным шрифтом. */
@font-face{font-family:'Literata FB';src:local('Georgia');font-weight:200 549;size-adjust:108.6%;ascent-override:108.4%;descent-override:28.4%;line-gap-override:0%;unicode-range:U+0020-007E,U+00A0-00FF,U+0400-045F,U+0490-0491,U+2013-2014,U+2018-201E,U+2026}
@font-face{font-family:'Literata FB';src:local('Georgia Bold'),local('Georgia-Bold');font-weight:550 900;size-adjust:96.6%;ascent-override:121.8%;descent-override:31.9%;line-gap-override:0%;unicode-range:U+0020-007E,U+00A0-00FF,U+0400-045F,U+0490-0491,U+2013-2014,U+2018-201E,U+2026}
@font-face{font-family:'Literata FB';src:local('Georgia Italic'),local('Georgia-Italic');font-style:italic;size-adjust:97.1%;ascent-override:121.2%;descent-override:31.7%;line-gap-override:0%;unicode-range:U+0020-007E,U+00A0-00FF,U+0400-045F,U+0490-0491,U+2013-2014,U+2018-201E,U+2026}
@font-face{font-family:'Manrope FB';src:local('Arial'),local('ArialMT');font-weight:200 549;size-adjust:100.1%;ascent-override:106.5%;descent-override:30%;line-gap-override:0%;unicode-range:U+0020-007E,U+00A0-00FF,U+0400-045F,U+0490-0491,U+2013-2014,U+2018-201E,U+2026}
@font-face{font-family:'Manrope FB';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 900;size-adjust:99.9%;ascent-override:106.7%;descent-override:30%;line-gap-override:0%;unicode-range:U+0020-007E,U+00A0-00FF,U+0400-045F,U+0490-0491,U+2013-2014,U+2018-201E,U+2026}

/* English with Mary — a warm, editorial collection. */
/* tokens:start */
/* VISUAL-01 · Единая палитра, миры и шкалы · gates: static, design:colors */
:root{
  color-scheme:only light;
  --ink:#272e2a;--ink-2:#3d4943;--muted:#5b645c;--muted-contrast:#434b44;
  --paper:#fffdf8;--cream:#f8f1e5;--line:#dcdcd0;--line-contrast:#8f978d;
  --ink-a08:rgb(39 46 42 / 8%);--ink-a16:rgb(39 46 42 / 16%);--ink-a25:rgb(39 46 42 / 25%);--ink-a50:rgb(39 46 42 / 50%);
  --blue-ink:#345e8d;--blue-stroke:#497fbd;--blue-marker:#8bb4df;--blue-wash:#eaf0f5;
  --finder-overview-ink:#274d75;--finder-overview-line:#8ca5b6;
  --finder-border-soft:rgb(40 51 45 / 10%);--finder-border:rgb(40 51 45 / 18%);
  --finder-choice-hover:#f0f1e9;--finder-close-hover:#f4e7db;
  --focus:#245dad;--coral:#bc482d;--coral-press:#a13b25;--yellow:#f2c766;--yellow-press:#e9b84c;--yellow-surface:#f2ce7d;
  --ink-press:#1b211e;--on-dark:#fffdf8;--selection:#f2cc7c;--scrim:rgb(28 36 31 / 60%);
  --blue:var(--blue-stroke);
  --world-listening:var(--w-listening-bg);--world-pronunciation:var(--w-pronunciation-bg);--world-speaking:var(--w-speaking-bg);--world-steps:var(--w-steps-bg);--world-skarb:var(--w-skarb-bg);
  --w-listening-bg:#e7edf5;--w-listening-ink:#294967;--w-listening-accent:#5a82ae;--w-listening-decor:#7590a9;
  --w-pronunciation-bg:#f0e5ed;--w-pronunciation-ink:#6b5070;--w-pronunciation-accent:#9975a0;--w-pronunciation-decor:#9c7a78;--w-pronunciation-mat:#fcf7ed;
  --w-speaking-bg:#f8e8da;--w-speaking-ink:#8a4a2e;--w-speaking-accent:#b4744e;--w-speaking-decor:#8d7958;
  --w-steps-bg:#e8eee5;--w-steps-ink:#44613f;--w-steps-accent:#708c60;--w-steps-decor:#839879;--w-steps-mat:#d7e0cf;
  --w-skarb-bg:#f7edcf;--w-skarb-ink:#735a22;--w-skarb-accent:#b59042;--w-skarb-decor:#a95841;--w-skarb-mat:#fffaf0;
  --font-body:Manrope,'Manrope FB',Arial,sans-serif;--font-display:Literata,'Literata FB',Georgia,serif;--font-heading:var(--font-display);--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
  --fs-label:.75rem;--fs-meta:.8125rem;--fs-small:.9375rem;--fs-ui:.9375rem;--fs-body:1rem;
  --fs-name:1.125rem;--fs-lead:1.1875rem;--fs-title-s:1.75rem;--fs-title:1.9375rem;--fs-title-xl:2.375rem;
  --fs-display:clamp(3.5rem,16.9vw,4.625rem);--fs-logo-word:.8125rem;--fs-logo-mark:1.875rem;--fs-logo-compact-word:.75rem;--fs-logo-compact-mark:1.625rem;
  --lh-label:1.4;--lh-meta:1.5;--lh-small:1.6;--lh-ui:1.35;--lh-body:1.65;--lh-name:1.4;--lh-lead:1.45;
  --lh-title-s:1.15;--lh-title:1.15;--lh-title-xl:1.1;--lh-display:1.04;
  --ls-label:.08em;--ls-name:-.01em;--ls-lead:-.02em;--ls-title:-.03em;--ls-title-xl:-.035em;--ls-display:-.04em;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --content-max:1280px;--gutter:16px;--card-pad-x:24px;--card-pad-y:32px;--card-pad-y-feature:48px;
  --section-y:64px;--section-y-s:40px;--chapter-gap:24px;--stack-1:16px;--stack-2:16px;--stack-3:24px;
  --measure:32em;--measure-card:26em;
  --r-xs:6px;--r-s:12px;--r-card:16px;--r-pill:999px;
  --shadow-1:0 1px 2px rgb(39 46 42 / 6%),0 6px 18px rgb(39 46 42 / 6%);
  --shadow-2:0 20px 32px -24px rgb(39 57 43 / 36%);
  --shadow-3:0 32px 96px rgb(23 34 28 / 22%);
  --shadow-collection:0 7px 18px var(--ink-a08);--shadow-nav:0 15px 30px var(--ink-a08);
  --shadow-picker:0 12px 28px var(--ink-a08);--shadow-chapter-film:0 16px 40px -25px var(--ink-a25);
  --shadow-world-film:0 20px 32px -25px #27392b5c;--shadow-world-paper:0 10px 25px -23px var(--ink-a25);
  --shadow-preview:0 12px 30px var(--ink-a08);--shadow-viewer-frame:0 8px 25px var(--ink-a16);
  --shadow-route-ring:0 0 0 3px currentColor;--shadow-finder-current:inset 3px 0 var(--blue-stroke);--world-film-hairline:#20301c0a;
  --shadow-need-icon:inset 0 0 0 1px var(--ink-a08);--shadow-steps-strip:0 0 0 100vmax var(--w-steps-bg);
  --fs-control-glyph:1.75rem;--fs-arrow-glyph:1.5rem;
  --dur-press:120ms;--dur-hover:200ms;--dur-ui:220ms;--dur-overlay:280ms;--dur-reveal:450ms;--dur-intro:700ms;
  --ease-out:cubic-bezier(.2,.7,.3,1);--ease-inout:cubic-bezier(.45,0,.55,1);--ease-settle:cubic-bezier(.22,.8,.25,1);
  --rise:10px;--control-h:54px;--control-h-compact:44px;--tap-min:44px;
  --icon-s:16px;--icon-m:20px;--icon-badge:32px;--focus-ring:3px solid var(--focus);--focus-offset:4px;
  /* VISUAL-06 · Единый словарь векторных значков · gates: design:icons, forced-colors */
  --icon-out:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11 11 5M6.5 5H11v4.5'/%3E%3C/svg%3E");
  --icon-next:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
  --icon-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3M7 4 3 8l4 4'/%3E%3C/svg%3E");
  --icon-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v10M4 9l4 4 4-4'/%3E%3C/svg%3E");
  --icon-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13V3M4 7l4-4 4 4'/%3E%3C/svg%3E");
  --icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E");
  --icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10'/%3E%3C/svg%3E");
  --icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");
  --icon-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 13.2S2.6 9.9 2.6 6.1A2.8 2.8 0 0 1 8 4.9a2.8 2.8 0 0 1 5.4 1.2C13.4 9.9 8 13.2 8 13.2Z'/%3E%3C/svg%3E");
  --icon-spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 1.5v13M1.5 8h13M3.4 3.4l9.2 9.2M3.4 12.6l9.2-9.2'/%3E%3C/svg%3E");
  --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
@media(max-width:359px){:root{--card-pad-x:20px;--fs-title:1.75rem;--fs-title-xl:2.125rem;--fs-display:3.5rem}}
@media(min-width:601px){:root{--fs-body:1.0625rem;--fs-lead:1.3125rem;--fs-title-s:1.875rem;--fs-title-xl:2.875rem;--gutter:24px;--card-pad-x:32px;--card-pad-y:40px;--card-pad-y-feature:56px;--section-y:88px;--section-y-s:48px;--chapter-gap:40px;--stack-2:24px;--stack-3:32px;--r-card:22px}}
@media(min-width:601px) and (max-width:800px){:root{--fs-display:4rem;--fs-logo-word:.875rem;--fs-logo-mark:2rem}}
@media(min-width:801px){:root{--fs-display:4.75rem;--fs-logo-word:1rem;--fs-logo-mark:2.25rem}}
@media(min-width:851px){:root{--fs-title:2.25rem}}
@media(min-width:1101px){:root{--fs-meta:.875rem;--fs-small:1rem;--fs-ui:1rem;--fs-body:1.125rem;--fs-name:1.25rem;--fs-lead:1.5rem;--fs-title-s:2.125rem;--fs-title:clamp(2.25rem,3.2vw,2.875rem);--fs-title-xl:clamp(3.25rem,4.45vw,4rem);--fs-display:clamp(4.125rem,6.6vw,5.75rem);--ls-display:-.035em;--gutter:44px;--card-pad-x:56px;--card-pad-y:56px;--card-pad-y-feature:72px;--section-y:112px;--section-y-s:56px;--chapter-gap:56px}}
@supports (animation-timing-function:linear(0,1)){@media(prefers-reduced-motion:no-preference){:root{--ease-settle:linear(0,.72 60%,1.015 88%,1)}}}
/* tokens:end */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{color:inherit;border:0}
button,summary{cursor:pointer}
img,video{display:block;max-width:100%}
figure,p,h1,h2,h3,blockquote{margin:0}
button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
svg{display:block}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance}
h2 em,h3 em{font-weight:var(--fw-regular)}
/* ОВ-14 · Прямой акцент в двух служебных заголовках · gates: static, browser, a11y */
.needs h2 em,.faq h2 em{font-style:normal;font-weight:inherit}
::selection{background:var(--selection);color:var(--ink)}

/* Type roles */
/* VISUAL-02 · Page type scale · gates: design:type, design:mobile, design:tablet */
body{font-size:var(--fs-body);line-height:var(--lh-body)}
.eyebrow,.hero .eyebrow,.section-heading .eyebrow,.needs-intro .eyebrow,.author-copy .eyebrow,.choose .eyebrow,.faq .eyebrow{font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);font-weight:var(--fw-bold)}
.hero-experience,.hero-footnote,.portrait-caption p,.needs-format,.need-grid small,.collection-note,.collection-nav a>span:not(.i),.collection-picker-label,.author-photo figcaption,.author-signoff>span,.choose small,.footer-bottom{font-size:var(--fs-meta);line-height:var(--lh-meta);letter-spacing:0;font-weight:var(--fw-medium)}
.world-hand{font-family:var(--font-display);font-size:var(--fs-small);line-height:var(--lh-small);letter-spacing:0;font-weight:var(--fw-regular);font-style:italic}
#site-nav a,.nav-cta,.button,.text-link,.need-grid>a>span:nth-child(2),.collection-nav a,.collection-picker-current,.footer-contacts a,.back-top,.faq-preview-links button{font-size:var(--fs-ui);line-height:var(--lh-ui);letter-spacing:0;font-weight:var(--fw-semibold)}
.hero-description,.author-principle>p,.section-heading>p,.author-copy>p:not(.eyebrow),.choose>p:not(.eyebrow),.faq-list summary,.faq-list details>p,.author-experience{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:0;font-weight:var(--fw-regular)}
.hello-note{font-size:var(--fs-name);line-height:var(--lh-name);letter-spacing:var(--ls-name);font-weight:var(--fw-bold)}
.hero-lead,.author-copy blockquote,.choose-doodle{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:var(--fw-medium)}
.needs h2,.footer-main>p,.author-signoff b,.author-experience strong{font-family:var(--font-display);font-size:var(--fs-title-s);line-height:var(--lh-title-s);letter-spacing:var(--ls-title);font-weight:var(--fw-medium)}
.author-copy h2,.faq h2{font-family:var(--font-display);font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-weight:var(--fw-medium)}
.section-heading h2,.choose h2{font-family:var(--font-display);font-size:var(--fs-title-xl);line-height:var(--lh-title-xl);letter-spacing:var(--ls-title-xl);font-weight:var(--fw-medium)}
.hero h1{font-family:var(--font-display);font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-medium)}
.hello-note,.author-photo figcaption,.author-copy blockquote,.author-signoff b,.choose-doodle{font-family:var(--font-display);font-style:italic;font-weight:var(--fw-regular)}
.hero-experience,.need-grid>a>span:nth-child(2){font-weight:var(--fw-semibold)}
.button,.faq-list summary,.collection-picker-current,.faq-preview-links button{font-weight:var(--fw-bold)}
.author-copy>p.author-work{font-weight:var(--fw-semibold)}
.collection-nav a>span:not(.i){font-variant-numeric:lining-nums tabular-nums}
.hero-description,.author-principle>p,.section-heading>p,.author-copy>p:not(.eyebrow),.choose>p:not(.eyebrow),.faq-list summary,.faq-list details>p,.world-hand{text-wrap:pretty}
/* VISUAL-03 · Shared dialog, viewer and finder type roles · gates: design:dialog-type, design-tokens */
.dialog-head>span,.detail-intro .eyebrow,.detail-showcase-label,.detail-list li::before,.viewer-head p,.ewm-finder__eyebrow,.ewm-finder .ewm-finder__step{font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);font-weight:var(--fw-bold)}
.detail-context,.detail-intro .facts span,.detail-fit .format-note,.detail-showcase figcaption>span:not(.detail-screen-hint),.detail-screen-hint,.detail-screen-choices button,.detail-contact-note,.detail-preview figcaption,.detail-resources figcaption,.screen-load-status,.viewer-choices button,.viewer-zoom [data-zoom=fit],.viewer-caption p,.viewer-gesture,.ewm-finder__selection-label,.ewm-finder .ewm-finder__product-purpose,.ewm-finder .ewm-finder__product-caption{font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:var(--fw-medium)}
.ewm-finder__choice-detail,.ewm-finder__selection,.ewm-finder .ewm-finder__product-format,.ewm-finder .ewm-finder__product-note,.ewm-finder__footer>p{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-regular)}
.dialog-bottom button,.detail-contact-link,.detail-dock-link,.ewm-finder__primary,.ewm-finder__text-button,.ewm-finder__overview,.screen-load-status button{font-size:var(--fs-ui);line-height:var(--lh-ui);font-weight:var(--fw-semibold)}
dialog.ewm-finder,.detail-story>p,.detail-list li,.detail-fit p:not(.format-note),.ewm-finder .ewm-finder__description,.ewm-finder__choice-title{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-regular)}
.detail-contact-title,.detail-showcase figcaption strong,.viewer-caption strong{font-family:var(--font-display);font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:var(--fw-medium)}
.detail-main h3,.detail-practice h3,.viewer-head h2,.ewm-finder .ewm-finder__product-name{font-family:var(--font-display);font-size:var(--fs-title-s);line-height:var(--lh-title-s);letter-spacing:var(--ls-title);font-weight:var(--fw-medium)}
.detail-intro h2,.product-dialog.has-preview .detail-intro h2{font-family:var(--font-display);font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-weight:var(--fw-medium)}
.ewm-finder .ewm-finder__title{font-family:var(--font-display);font-size:var(--fs-title-xl);line-height:var(--lh-title-xl);letter-spacing:var(--ls-title-xl);font-weight:var(--fw-medium)}
.ewm-finder__choice-title{font-weight:var(--fw-bold)}
.dialog-bottom button,.ewm-finder__primary{font-weight:var(--fw-bold)}
.detail-screen-hint,.detail-screen-choices button,.viewer-choices button,.viewer-zoom [data-zoom=fit],.ewm-finder .ewm-finder__product-purpose{font-weight:var(--fw-semibold)}
.wrap{width:min(var(--content-max),calc(100% - var(--gutter) - var(--gutter)));margin-inline:auto}
.skip{position:fixed;left:20px;top:-100px;z-index:200;background:var(--ink);color:var(--on-dark);padding:12px 20px}
.skip:focus{top:12px}

.header{height:106px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{font-size:var(--fs-logo-word);display:flex;align-items:baseline;gap:7px;white-space:nowrap;letter-spacing:-.05em}
.logo strong{font:600 var(--fs-logo-mark)/1 Georgia,serif;position:relative;letter-spacing:-1.8px}
.logo strong:after{content:'';position:absolute;height:4px;background:var(--blue);left:1px;right:0;bottom:-6px;transform:rotate(-4deg);border-radius:50%}
.logo strong span{color:var(--coral)}
#site-nav{display:flex;align-items:center;gap:27px}
#site-nav>a:not(.nav-cta){padding-block:12px}
#site-nav>a:not(.nav-cta):hover{color:var(--blue-ink)}
.nav-cta{background:var(--yellow);padding:13px 20px;border-radius:100px}
.nav-cta span{padding-left:12px}
.menu-toggle{display:none}

/* The original greeting remains the heart of the page. */
.hero{border-radius:var(--r-card);background:var(--cream);display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:44px;min-height:665px;position:relative;isolation:isolate}
.hero-copy{position:relative;z-index:2}
.hero .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:23px}
.sun-mini{color:var(--coral);width:22px;height:22px;flex-shrink:0}
.hero h1{width:fit-content;position:relative}
.marked{position:relative;z-index:0}
.marked:after{content:'';position:absolute;left:-3px;right:0;height:10px;background:var(--blue-marker);bottom:2px;border-radius:50%;transform:rotate(-3deg);z-index:-1}
.hello-spark{position:absolute;right:-66px;top:26px;width:46px;height:46px;color:var(--coral);transform:rotate(12deg)}
.hero-lead{margin-top:27px}
.hero-description{color:var(--muted);margin-top:17px;max-width:var(--measure-card);}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:29px}
.button{display:inline-flex;gap:var(--space-4);align-items:center;justify-content:center;min-height:var(--control-h);padding:0 var(--space-5);border-radius:var(--r-pill)}
.button span{font-weight:var(--fw-regular)}
.primary{background:var(--coral);color:var(--on-dark)}
.dark{background:var(--ink);color:var(--paper)}
.text-link{display:inline-flex;gap:var(--space-3);align-items:center;padding:0;background:transparent;color:var(--ink);min-height:var(--tap-min)}
.hero-footnote{margin-top:20px;color:var(--muted);display:flex;align-items:center;gap:16px}
.hero-footnote svg{width:74px;height:27px;fill:none;stroke:var(--blue);stroke-width:2.4;transform:rotate(-10deg)}
.hero-art{position:relative;margin:0 16px 15px 14px;min-width:0}
.portrait{height:465px;border-radius:145px 145px 24px 24px;overflow:hidden;transform:rotate(3deg);position:relative;background:var(--cream)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.portrait-backing{position:absolute;inset:0 -17px -15px 7px;background:var(--yellow);border-radius:145px 145px 24px 24px;transform:rotate(-3deg)}
.hello-note{position:absolute;right:-28px;top:13px;background:var(--paper);box-shadow:var(--shadow-1);border-radius:4px;padding:11px 17px;transform:rotate(9deg)}
.portrait-caption{position:absolute;bottom:-17px;left:-36px;background:var(--paper);border:1px solid var(--line);padding:15px 20px;border-radius:9px;box-shadow:var(--shadow-1);display:flex;gap:12px;align-items:center;transform:rotate(-4deg)}
.portrait-caption strong{font-weight:var(--fw-bold)}

/* A quiet index, then the collection begins. */
.needs{padding-inline:0}
.needs-intro{display:flex;align-items:baseline;justify-content:space-between;gap:25px;margin-bottom:32px}
.needs-intro p{color:var(--muted)}
.need-grid{display:grid;grid-template-columns:repeat(5,1fr);border-block:1px solid var(--line)}
.need-grid>a{padding:23px 17px;display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;position:relative;min-height:110px}
.need-grid>a+a{border-left:1px solid var(--line)}

.need-grid b{position:absolute;right:8px;top:10px;font-weight:var(--fw-regular);color:var(--muted)}
.need-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%}
.need-icon img{width:34px;height:34px}
.blue{background:var(--w-listening-bg)}
.rose{background:var(--w-pronunciation-bg)}
.peach{background:var(--w-speaking-bg)}
.green{background:var(--w-steps-bg)}
.yellow{background:var(--w-skarb-bg)}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.section-heading .eyebrow{margin-bottom:23px;color:var(--muted)}
.section-heading>p{max-width:295px;margin-bottom:7px}
.collection-note{display:block;color:var(--muted);margin-top:13px}

/* A personal letter and a considered invitation. */
.author{display:grid;grid-template-columns:.82fr 1.18fr;gap:100px;align-items:center}
.author-photo{position:relative;padding:10px 10px 40px;background:var(--cream);transform:rotate(-3deg)}
.author-photo img{width:100%;height:470px;object-fit:cover;object-position:center}
.author-photo figcaption{position:absolute;bottom:11px;left:20px;right:20px;display:flex;justify-content:space-between}
.author-photo figcaption span{color:var(--coral)}
.author-copy .eyebrow{margin-bottom:24px;color:var(--muted)}
.author-copy blockquote{hanging-punctuation:first;margin:26px 0;color:var(--blue-ink);max-width:460px;border-left:2px solid var(--blue-marker);padding-left:21px}
.author-copy>p:not(.eyebrow){color:var(--muted);margin-top:17px;max-width:var(--measure)}
.author-signoff{display:flex;flex-direction:column;gap:5px;margin-top:25px;}
.author-signoff b span{display:inline-block;margin-left:12px;color:var(--coral);transform:rotate(-12deg)}
.choose{position:relative;background:var(--yellow-surface);border-radius:var(--r-card);text-align:center;isolation:isolate;overflow:hidden}
.choose .eyebrow{margin-bottom:20px}
.choose>p:not(.eyebrow){margin:24px auto 28px;max-width:520px}
.choose small{display:block;margin-top:15px}
.choose-star{position:absolute;top:38px;left:8%;width:72px;height:72px;color:var(--coral);transform:rotate(-12deg)}
.choose-doodle{position:absolute;bottom:75px;right:5%;transform:rotate(9deg);color:var(--ink)}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}
.faq .eyebrow{margin-bottom:20px;color:var(--muted)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{list-style:none;display:flex;justify-content:space-between;gap:25px;padding:23px 0}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary>span{flex:0 0 20px;font-weight:var(--fw-regular);color:var(--blue-ink)}
.faq-list details>p{max-width:var(--measure);padding:0 35px 25px 0;color:var(--muted)}
.footer{border-top:1px solid var(--line)}
.footer-main{display:flex;justify-content:space-between;align-items:center;gap:40px}
.back-top{display:flex;gap:17px;align-items:center}
.back-top>span{display:grid;place-items:center;width:45px;height:45px;border:1px solid var(--line);border-radius:50%;}
.footer-bottom{padding:20px 0 25px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;color:var(--muted)}

/* Product details inherit the chosen world, right through the last action. */
.product-dialog{--detail-bg:var(--w-listening-bg);--detail-accent:var(--w-listening-ink);border:0;padding:0;margin:auto;width:min(1080px,calc(100% - 48px));max-width:none;max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;border-radius:var(--r-card);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-3)}
.product-dialog::backdrop{background:var(--scrim);backdrop-filter:blur(6px)}
.product-dialog[data-world=pronunciation]{--detail-bg:var(--w-pronunciation-bg);--detail-accent:var(--w-pronunciation-ink)}
.product-dialog[data-world=speaking]{--detail-bg:var(--w-speaking-bg);--detail-accent:var(--w-speaking-ink)}
.product-dialog[data-world=steps]{--detail-bg:var(--w-steps-bg);--detail-accent:var(--w-steps-ink)}
.product-dialog[data-world=skarb]{--detail-bg:var(--w-skarb-bg);--detail-accent:var(--w-skarb-ink)}
.dialog-head{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 28px;background:var(--detail-bg);border-bottom:1px solid var(--ink-a08)}
.dialog-close{background:transparent;min-width:44px;min-height:44px;border:1px solid var(--ink-a16);border-radius:50%;font-size:var(--fs-control-glyph);line-height:1}
.detail-intro{padding:36px 44px 40px;background:var(--detail-bg);display:grid;grid-template-columns:1.08fr .92fr;gap:35px;align-items:center}
.detail-intro .eyebrow{color:var(--detail-accent);margin-bottom:17px}
.detail-intro img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:9px;mix-blend-mode:multiply}
.detail-context{margin-bottom:18px;color:var(--detail-accent)}
.detail-intro .facts{margin-top:23px}
.detail-main{padding:40px 44px;display:grid;grid-template-columns:1.2fr .8fr;gap:50px}
.detail-main h3{margin:28px 0 17px}
.detail-main h3:first-child{margin-top:0}
.detail-list{list-style:none;margin:0;padding:0;counter-reset:lesson}
.detail-list li{position:relative;padding:17px 0 17px 35px;border-bottom:1px solid var(--line);counter-increment:lesson}
.detail-list li:before{content:'0' counter(lesson);position:absolute;left:0;top:18px;color:var(--detail-accent)}
.detail-fit{background:var(--cream);padding:25px;border-radius:8px;align-self:start}
.detail-fit .format-note{padding-top:22px;margin-top:22px;border-top:1px solid var(--line);color:var(--muted)}
.detail-practice{margin:0 44px 40px;padding-top:30px;border-top:1px solid var(--line)}
.detail-practice h3{margin-bottom:22px}
.detail-preview{background:var(--detail-bg);padding:20px;border-radius:8px}
.detail-preview img{width:100%;max-height:600px;object-fit:contain}
.detail-preview figcaption,.detail-resources figcaption{margin-top:14px;color:var(--muted)}
.detail-resources{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.detail-resources figure{min-width:0}
.detail-resources img{width:100%;height:200px;object-fit:contain;background:var(--cream);border-radius:6px}
.dialog-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 44px;border-top:1px solid var(--line)}
.dialog-bottom button{background:transparent;min-height:44px}
.dialog-bottom .detail-back{color:var(--detail-accent)}

@media(min-width:1450px){.hero-art{margin-left:28px}
.portrait{height:490px}
}

@media(max-width:1100px){.hero{gap:25px}
.hero-actions{gap:12px}
.hero-actions .button{padding-inline:19px}
.portrait{height:430px}
#site-nav{gap:18px;}
.need-grid>a{padding:20px 11px;grid-template-columns:35px 1fr;gap:7px}
.need-icon{width:34px;height:34px}
.need-icon img{width:28px;height:28px}
.author{gap:65px}
.author-photo img{height:420px}
.faq{gap:65px}
.choose-doodle{right:3%}
}

@media(max-width:800px){.header{height:85px;position:relative;z-index:10}
.logo{font-size:var(--fs-logo-word)}
.logo strong{font-size:var(--fs-logo-mark)}
.js .menu-toggle{display:flex;flex-direction:column;gap:7px;justify-content:center;align-items:center;width:46px;height:46px;border-radius:50%;background:var(--cream)}
.menu-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
#site-nav{gap:12px;}
.js #site-nav{display:none;position:absolute;left:0;right:0;top:73px;background:var(--paper);padding:20px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-nav)}
.js #site-nav.is-open{display:flex;flex-direction:column;align-items:stretch}
.js #site-nav a{padding:13px 15px;}
.hero{grid-template-columns:1fr 1fr;gap:25px;min-height:580px}
.hero .eyebrow{gap:7px}
.desktop-break{display:none}
.hello-spark{width:34px;height:34px;right:-43px}
.hero-art{margin:0 8px 0 0}
.portrait{height:370px}
.hello-note{right:-21px;padding:9px 12px}
.portrait-caption{left:-17px;padding:11px 12px}
.need-grid{grid-template-columns:repeat(3,1fr);border-bottom:0}
.need-grid>a{padding:19px 15px;grid-template-columns:36px 1fr;border-bottom:1px solid var(--line)}
.need-grid>a:nth-child(4){border-left:0}
.section-heading{gap:25px;align-items:start}
.section-heading>p{max-width:190px}
.author{gap:45px}
.author-photo img{height:370px}
.choose-star{width:50px;height:50px;left:5%;top:20px}
.choose-doodle{display:none}
.faq{gap:40px}
.detail-main{gap:30px;padding:32px}
.detail-intro{padding:30px 32px}
.detail-practice{margin-inline:32px}
.dialog-bottom{padding-inline:32px}
}

@media(max-width:600px){html{scroll-padding-top:20px}
.header{height:78px}
.logo{font-size:var(--fs-logo-word)}
.logo strong{font-size:var(--fs-logo-mark)}
/* The greeting, portrait and first action share the opening mobile viewport. */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-radius:20px;align-items:start;min-height:0}

.hero-copy{display:contents}

.hero .eyebrow{grid-row:1;margin:0 0 15px;gap:8px}

.hero .sun-mini{width:17px;height:17px}

.hero h1{grid-row:2;}

.hello-spark{width:30px;height:30px;right:-44px;top:21px}

.hero-lead{grid-row:3;max-width:310px;margin:18px 0 0}

.hero-art{grid-row:4;width:min(260px,calc(100% - 26px));justify-self:center;margin:23px 0 0}

.portrait{height:250px;border-radius:95px 95px 18px 18px;transform:rotate(2deg)}

.portrait img{object-position:50% 27%}

.portrait-backing{border-radius:95px 95px 18px 18px;right:-10px;bottom:-8px;transform:rotate(-3deg)}

.hello-note{right:-20px;top:9px;padding:8px 11px}

.portrait-caption{left:-16px;bottom:-13px;padding:9px 13px;transform:rotate(-3deg);border-radius:6px}

.hero-actions{grid-row:5;margin-top:34px;display:flex;flex-direction:column;align-items:stretch;gap:2px}

.hero-actions .button{min-height:52px;padding:13px 20px;justify-content:space-between}

.hero-actions .text-link{justify-content:center;min-height:44px}

.hero-description{grid-row:6;max-width:var(--measure-card);margin-top:15px;padding-top:18px;border-top:1px solid var(--line)}

.hero-footnote{grid-row:7;margin-top:13px;gap:12px}

.needs-intro{display:block;margin-bottom:22px}
.needs-intro p{margin-top:10px;}
.need-grid{grid-template-columns:1fr 1fr}
.need-grid>a{padding:17px 11px;min-height:88px;gap:10px}
.need-grid>a:nth-child(odd){border-left:0}
.need-grid>a:nth-child(even){border-left:1px solid var(--line)}
.need-grid>a:last-child{grid-column:1/-1;grid-template-columns:36px 1fr;min-height:77px}
.need-grid>a:last-child br{display:none}
.section-heading{display:block}
.section-heading .eyebrow{margin-bottom:19px;}
.section-heading>p{max-width:none;margin-top:23px}
.section-heading>p br{display:none}
.collection-note{margin-top:7px}
.author{display:flex;flex-direction:column;gap:50px}
.author-photo{width:min(310px,100%)}
.author-photo img{height:360px}
.author-copy .eyebrow{margin-bottom:18px}
.author-copy blockquote{hanging-punctuation:first;margin:24px 0;padding-left:17px}
.author-signoff{margin-top:24px}
.choose{border-radius:18px}
.choose .eyebrow{position:relative}
.choose-star{width:32px;height:32px;left:auto;right:17px;top:13px}
.choose>p:not(.eyebrow){margin:22px 0 24px}
.choose>p br{display:none}
.choose .button{gap:18px;padding-inline:20px}
.choose small{max-width:260px;margin:15px auto 0}
.faq{display:block}
.faq h2 br{display:none}
.faq .eyebrow{margin-bottom:17px}
.faq-list{margin-top:30px}
.faq-list summary{gap:16px;padding:21px 0}
.faq-list details>p{padding-right:13px}
.footer-main{gap:25px;flex-wrap:wrap}
.footer-main>.logo{order:0}
.footer-main>p{order:2;width:100%;}
.back-top{gap:7px}
.back-top>span{width:44px;height:44px;}
.footer-bottom{flex-direction:column;gap:7px;padding-block:20px}
.product-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:var(--r-card)}
.dialog-head{padding:10px 18px}
.dialog-head>span{max-width:220px}
.dialog-close{min-width:40px;min-height:40px}
.detail-intro{display:flex;flex-direction:column;padding:25px 23px 28px;gap:25px;align-items:stretch}
.detail-intro .eyebrow{margin-bottom:15px}
.detail-intro img{mix-blend-mode:normal}
.detail-main{display:block;padding:29px 23px}
.detail-list li{padding-left:29px}
.detail-fit{margin-top:28px;padding:22px}
.detail-practice{margin:0 23px 28px;padding-top:24px}
.detail-preview{padding:10px}
.detail-resources{grid-template-columns:1fr;gap:27px}
.detail-resources img{height:230px}
.dialog-bottom{padding:17px 23px;align-items:start;flex-direction:column;gap:4px}
.dialog-bottom button{text-align:left}
}

@media(max-width:359px){.hello-spark{right:-34px;width:26px;height:26px}
.portrait{height:228px}
.need-grid>a{gap:6px;padding-inline:8px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

@media(forced-colors:active){.button,.product-link{border:1px solid ButtonText}
.marked:after{background:Highlight}
.menu-toggle{border:1px solid ButtonText}
.detail-screen-choices button[aria-pressed=true],.viewer-choices button[aria-pressed=true]{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
.product-dialog,.product-viewer{border:1px solid CanvasText}
[data-route-state=unavailable]::before{background:CanvasText}
}

@media(max-width:800px){html:not(.js) .header{height:auto;flex-wrap:wrap;padding-block:24px}
html:not(.js) #site-nav{width:100%;flex-wrap:wrap;gap:8px 18px}
html:not(.js) #site-nav .nav-cta{padding:10px 15px}
}

/* ── lane:L-GATE ── */
/* lane:L-GATE:end */

/* ── lane:L-VIS ── */
/* VISUAL-03 · One inset rhythm for dialog sections · gates: design:dialog-type */
.detail-intro { padding: var(--space-6) var(--card-pad-x); }
.detail-main { padding: var(--space-7) var(--card-pad-x); }
.dialog-bottom { padding: var(--space-5) var(--card-pad-x); }
@media (max-width: 600px) {
  .detail-intro, .detail-main { padding-block: var(--space-5); }
  .dialog-bottom { padding-block: var(--space-4); }
}
/* VISUAL-04 · Two editorial edges and one section rhythm · gates: design:edges */
.hero, .choose { padding: var(--card-pad-y-feature) var(--card-pad-x); }
.needs { padding-block: var(--section-y-s) var(--section-y); }
.section-heading { margin-bottom: var(--space-7); }
.author, .faq { padding-block: var(--section-y); padding-inline: 0; }
.footer { padding-top: var(--space-7); }
.footer-main { padding-inline: 0; padding-block: 0 var(--space-7); }
.hero .eyebrow, .section-heading .eyebrow, .author-copy .eyebrow, .choose .eyebrow, .faq .eyebrow { margin-bottom: var(--stack-1); }
.hero .hero-lead { margin-top: var(--stack-2); }
.hero .hero-actions { margin-top: var(--stack-3); }
.author-copy blockquote { margin-block: var(--stack-2); }
.choose > p:not(.eyebrow) { margin-block: var(--stack-2) var(--stack-3); }
/* VISUAL-06 · Маска значка и запасной глиф при старом CSS/forced colors · gates: design:icons, a11y */
.i { display: inline-grid; place-items: center; flex: none; width: var(--icon-s); height: var(--icon-s); }
.i[data-icon=out] { --icon: var(--icon-out); }
.i[data-icon=next] { --icon: var(--icon-next); }
.i[data-icon=back] { --icon: var(--icon-back); }
.i[data-icon=down] { --icon: var(--icon-down); }
.i[data-icon=up] { --icon: var(--icon-up); }
.i[data-icon=plus] { --icon: var(--icon-plus); }
.i[data-icon=minus] { --icon: var(--icon-minus); }
.i[data-icon=close] { --icon: var(--icon-close); }
.i[data-icon=heart] { --icon: var(--icon-heart); }
.i[data-icon=spark] { --icon: var(--icon-spark); }
.i[data-icon=chevron] { --icon: var(--icon-chevron); }
details[open] > summary .i[data-icon=plus] { --icon: var(--icon-minus); }
.i[data-icon=close],.faq-list .i[data-icon=plus] { width: var(--icon-m); height: var(--icon-m); }
@supports ((mask-image:linear-gradient(currentColor,currentColor)) or (-webkit-mask-image:linear-gradient(currentColor,currentColor))) {
  .i { font-size: 0; line-height: 0; }
  .i::after { content: ''; width: var(--icon-s); height: var(--icon-s); background: currentColor; -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }
  .i[data-icon=close]::after,.faq-list .i[data-icon=plus]::after { width: var(--icon-m); height: var(--icon-m); }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .i[data-icon=out]::after,.i[data-icon=next]::after,.i[data-icon=down]::after { transition: transform var(--dur-hover) var(--ease-out); }
  a:hover .i[data-icon=out]::after,button:hover .i[data-icon=out]::after { transform: translate(1.5px,-1.5px); }
  a:hover .i[data-icon=next]::after,button:hover .i[data-icon=next]::after { transform: translateX(1.5px); }
  a:hover .i[data-icon=down]::after,button:hover .i[data-icon=down]::after { transform: translateY(1.5px); }
}
@media (forced-colors:active) {
  .i { font-size: inherit; line-height: inherit; width: auto; height: auto; }
  .i::after { content: none; }
}
@media (max-width: 600px) {
  .section-heading { margin-bottom: var(--space-6); }
  .section-heading > p, .faq-list { margin-top: var(--stack-2); }
  .footer-main { padding-bottom: var(--space-6); }
  .footer { padding-top: var(--space-6); }
}
/* INNOVATION-11 · Continuous corners for large surfaces, with circular fallback · gates: @supports, S/M/L */
@supports (corner-shape: squircle) {
  .hero, .choose, .product-dialog, html dialog.ewm-finder, #programs .product:not(.steps) {
    corner-shape: squircle;
    border-radius: calc(var(--r-card) * 1.84);
  }
  @media (max-width: 600px) {
    .hero { border-radius: calc(20px * 1.84); }
    .choose { border-radius: calc(18px * 1.84); }
  }
}
/* A11Y-09 · Viewer edge survives its later component shell rule · gates: forced-colors */
@media (forced-colors:active) { dialog.product-viewer { border: 1px solid CanvasText; } }
/* A11Y-11 · Shared focus ring and intentional heading focus · gates: focus, forced-colors */
:where(a,button,summary,[tabindex="0"]):focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
:is(h1,h2,h3)[tabindex="-1"]:focus { outline: none; }
:is(h1,h2,h3)[tabindex="-1"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--r-xs); }
@media (forced-colors:active) { :root { --focus: Highlight; } }
/* A11Y-13 · Stronger text, separators, controls and focus on contrast request · gates: axe contrast-more */
@media (prefers-contrast:more) {
  :root { --muted: var(--muted-contrast); --line: var(--line-contrast); --focus-ring: 4px solid var(--focus); }
  :root .facts span, :root .product .facts span, :root .detail-intro .facts span,
  :root .product .product-link { border-color: var(--ink); }
  :where(a,button,summary,[tabindex="0"]):focus-visible { outline-width: 4px; }
}
/* lane:L-VIS:end */

/* ── lane:L-ROUTE ── */
/* A11Y-08 · скрытая подпись новой вкладки · gates: a11y names */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* A11Y-07b · английская подпись сохраняет исходный цвет · gates: lang, mobile */
.author-photo figcaption span[lang="en"]{color:inherit}
/* lane:L-ROUTE:end */

/* ── lane:L-NAV ── */
/* VISUAL-07 · Логотип Literata 600 и компактный знак · gates: design:logo */
.logo{font-size:var(--fs-logo-word);gap:.43em;letter-spacing:-.01em}
.logo strong{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-logo-mark);line-height:1;font-optical-sizing:auto;letter-spacing:-.02em}
.logo strong:after{bottom:-9px}
/* UX-03 · Одобренный вход в школу · gates: nav:login, static fallback */
.header-login{display:none}
#site-nav .nav-login:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
@media(max-width:800px){
  .header{gap:var(--space-2)}
  .js .header-login{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-min);padding-inline:var(--space-2);margin-left:auto;font-family:var(--font-body);font-size:var(--fs-ui);font-weight:var(--fw-semibold);line-height:var(--lh-ui);color:var(--ink)}
  .js #site-nav .nav-login{display:none}
}
/* UX-04 · Зарезервированная полоса и возвращение навигации · gates: nav:header-reveal, reduced motion */
html{scroll-padding-top:calc(var(--control-h) + var(--space-4))}
.site-header{--header-slot:106px;block-size:var(--header-slot)}
html[data-header] .site-header__bar{position:fixed;inset:0 0 auto;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
html[data-header] .header{height:64px}
html[data-header] .logo{font-size:var(--fs-logo-compact-word);letter-spacing:-.01em;gap:.45em}
html[data-header] .logo strong{font-size:var(--fs-logo-compact-mark)}
html[data-header=hidden] .site-header__bar{transform:translateY(-10px);opacity:0;visibility:hidden;pointer-events:none}
@media(prefers-reduced-motion:no-preference){html[data-header] .site-header__bar{transition:transform var(--dur-ui) var(--ease-out),opacity var(--dur-ui) var(--ease-out)}}
html[data-header-focus] .site-header__bar{transition:none}
@media(max-width:800px){
  .site-header{--header-slot:85px}
  html:not(.js) .site-header{block-size:auto}
  html.js[data-header] #site-nav{top:calc(100% + var(--space-2));max-height:calc(100vh - 80px);overflow:auto}
  @supports(height:100dvh){html.js[data-header] #site-nav{max-height:calc(100dvh - 80px)}}
}
@media(max-width:600px){.site-header{--header-slot:78px}html[data-header] .header{height:56px}}
@media(max-width:600px) and (max-height:740px){.site-header{--header-slot:68px}}
/* MOBILE-09 · Низкий альбом использует компактную шапку · gates: phones:fold, nav:login */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .site-header{--header-slot:60px}
  .header,html[data-header] .header{height:60px}
  .header{position:relative;z-index:10;gap:var(--space-2)}
  .js .header-login{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap-min);padding-inline:var(--space-2);margin-left:auto;font-family:var(--font-body);font-size:var(--fs-ui);font-weight:var(--fw-semibold);line-height:var(--lh-ui);color:var(--ink)}
  .js #site-nav .nav-login{display:none}
  .js .menu-toggle{display:flex;flex-direction:column;gap:7px;justify-content:center;align-items:center;width:46px;height:46px;border-radius:50%;background:var(--cream)}
  .menu-toggle svg{width:var(--icon-m);height:var(--icon-m);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
  .js #site-nav{display:none;position:absolute;left:0;right:0;top:calc(100% + var(--space-2));max-height:calc(100vh - 80px);overflow:auto;gap:var(--space-3);background:var(--paper);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--r-s);box-shadow:var(--shadow-nav)}
  .js #site-nav.is-open{display:flex;flex-direction:column;align-items:stretch}
  .js #site-nav a{padding:13px 15px}
  html:not(.js) .site-header{block-size:auto}
  html:not(.js) .header{height:auto;flex-wrap:wrap;padding-block:var(--space-5)}
  html:not(.js) #site-nav{width:100%;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
  @supports (height:100dvh){.js #site-nav{max-height:calc(100dvh - 80px)}}
}
/* lane:L-NAV:end */

/* ── lane:L-DLG ── */
/* INNOVATION-05 · резерв скроллбара для трёх модальных окон · gates: innovation.overlay, S/L */
html{scrollbar-gutter:stable}
/* INNOVATION-05 · тихий вход и выход окна/меню, без повторного входа внутри журнала · gates: innovation.overlay, A11Y-12:R1,R2,R3,R5,R8 */
@media(prefers-reduced-motion:no-preference){
  .product-dialog{opacity:0;transform:translateY(var(--rise));transition:opacity var(--dur-overlay) var(--ease-out),transform var(--dur-overlay) var(--ease-out),overlay var(--dur-overlay) allow-discrete,display var(--dur-overlay) allow-discrete}
  .product-dialog[open]{opacity:1;transform:none}
  @starting-style{.product-dialog[open]{opacity:0;transform:translateY(var(--rise))}}
  .product-dialog::backdrop{opacity:0;transition:opacity var(--dur-overlay) var(--ease-out)}
  .product-dialog[open]::backdrop{opacity:1}
  @starting-style{.product-dialog[open]::backdrop{opacity:0}}
  .product-dialog[data-instant],.product-dialog[data-instant]::backdrop{transition:none!important}
}
@media(max-width:600px) and (prefers-reduced-motion:no-preference){
  .product-dialog{transform:translateY(12px)}
  @starting-style{.product-dialog[open]{transform:translateY(12px)}}
}
@media(max-width:800px) and (prefers-reduced-motion:no-preference){
  html.js[data-overlay-ready] #site-nav{flex-direction:column;align-items:stretch;opacity:0;transform:translateY(-6px);transition:opacity var(--dur-hover) var(--ease-out),transform var(--dur-hover) var(--ease-out),display var(--dur-hover) allow-discrete}
  html.js[data-overlay-ready] #site-nav.is-open{opacity:1;transform:none}
  @starting-style{html.js[data-overlay-ready] #site-nav.is-open{opacity:0;transform:translateY(-6px)}}
}
/* MOBILE-06 · запасной vh до dvh для высоты окна · gates: S, landscape */
.product-dialog{max-height:calc(100vh - var(--space-7));max-height:calc(100dvh - var(--space-7))}
@media(max-width:600px){.product-dialog{max-height:calc(100vh - var(--space-4));max-height:calc(100dvh - var(--space-4))}}
/* A11Y-06 · фокус внутри окна не уходит под шапку или док · gates: focus, S, landscape */
.product-dialog{scroll-padding-top:var(--space-9);scroll-padding-bottom:var(--space-4)}
@media(max-width:600px), (orientation:landscape) and (max-height:500px) and (pointer:coarse){.product-dialog{scroll-padding-bottom:var(--space-9)}}
/* lane:L-DLG:end */

/* ── lane:L-FILM ── */
/* lane:L-FILM:end */

/* ── lane:L-MOT ── */
/* INNOVATION-10 · защита светлой палитры · gates: none */
:root{color-scheme:only light}
/* INNOVATION-03 · тихий вход первого экрана · gates: no-preference */
.marked::after { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
 @supports (translate: 0 0) {
  .portrait-backing { animation: mot-intro-backing 600ms var(--ease-out) 120ms backwards; }
  .marked::after { animation: mot-intro-mark 700ms var(--ease-inout) 250ms backwards; }
  .hello-note { animation: mot-intro-note 650ms var(--ease-settle) 450ms backwards; }
  .portrait-caption { animation: mot-intro-caption 500ms var(--ease-out) 600ms backwards; }
  @media (min-width: 601px) {
    .hero-footnote svg path { stroke-dasharray: 1; animation: mot-intro-arrow 300ms var(--ease-out) 900ms backwards; }
  }
  @keyframes mot-intro-backing { from { rotate: 2deg; } to { rotate: 0deg; } }
  @keyframes mot-intro-mark { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes mot-intro-note { from { opacity: 0; translate: 0 -8px; rotate: 2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
  @keyframes mot-intro-caption { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
  @keyframes mot-intro-arrow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
 }
}
/* INNOVATION-04 / WOW-08 · письмо автора и мобильная стрелка · gates: no-preference + @supports animation-timeline */
@media (prefers-reduced-motion: no-preference) {
 @supports (animation-timeline: view()) {
  .author-photo { animation: mot-author-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  .author-photo figcaption, .author-signoff b { animation: mot-world-write linear both; animation-timeline: view(); animation-range: entry 40% cover 35%; }
  @media (max-width: 600px) {
   .hero-footnote { view-timeline: --mot-footnote block; }
   .hero-footnote svg path { stroke-dasharray: 1; animation: mot-intro-arrow linear both; animation-timeline: --mot-footnote; animation-range: entry 50% entry 100%; }
  }
  @keyframes mot-author-settle { from { translate: 0 12px; rotate: 2deg; } to { translate: 0 0; rotate: 0deg; } }
  @keyframes mot-world-write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -4% -20% 0); } }
 }
}
/* INNOVATION-08 · FAQ раскрывается к auto · gates: no-preference + @supports interpolate-size/details-content */
@media (prefers-reduced-motion: no-preference) {
 @supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-list details::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--dur-overlay) var(--ease-out), content-visibility var(--dur-overlay) allow-discrete; }
  .faq-list details[open]::details-content { block-size: auto; }
  .faq-list details > p { transition: opacity var(--dur-overlay) var(--ease-out); }
  .faq-list details:not([open]) > p { opacity: .6; }
 }
}
/* INNOVATION-09 · один текстовый оптический срез смешанного заголовка · gates: static fallback */
#hero-title { font-optical-sizing: none; }
/* lane:L-MOT:end */

/* ── lane:L-PERF ── */
/* lane:L-PERF:end */