@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-garamond-400.ttf") format('truetype'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-500.ttf") format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.ttf") format('truetype'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.ttf") format('truetype'); } :root{--bg:oklch(1 0 0);--surface:oklch(.942 .012 230);--fg:oklch(.275 .026 250);--muted:oklch(.525 .018 246);--border:oklch(.902 .01 236);--accent:oklch(.335 .052 250);--fg-soft:color-mix(in oklch,var(--fg) 4%,var(--bg));--font-display:'Cormorant Garamond',Georgia,serif;--font-body:Inter,sans-serif;--gutter:24px;--container:600px} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:66px;-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--font-body);-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}h1,h2,h3{font-family:var(--font-display);font-weight:500;line-height:1.02;letter-spacing:-.025em;text-wrap:balance}p{text-wrap:pretty}h2{font-size:46px}h3{font-size:29px}img{display:block;max-width:100%;height:auto}button,a{color:inherit}a{text-decoration:none}button{font:inherit;border:0;background:none;cursor:pointer;min-height:44px}a:hover{text-decoration:underline;text-underline-offset:5px}button:hover{text-decoration:underline;text-underline-offset:5px}:focus-visible{outline:2px solid currentColor;outline-offset:4px}[hidden]{display:none!important}.container{padding-inline:var(--gutter)}.eyebrow{font:500 11px/1.5 var(--font-body);letter-spacing:.13em;text-transform:uppercase}.chapter{padding:36px 0;scroll-margin-top:66px}.chapter-mark{margin-bottom:20px}.chapter-end{display:flex;justify-content:space-between;align-items:center;min-height:48px;margin-top:32px;border-top:1px solid var(--border);padding-top:14px;font-size:12px}.chapter-end span:last-child{font-size:20px}.text-link{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--fg);font-size:13px}.topnav{position:sticky;top:0;z-index:60;height:60px;background:var(--bg);border-bottom:1px solid var(--border)}.topnav-inner{height:60px;padding:0 20px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center}.topnav-inner .logo{grid-column:2;grid-row:1;justify-self:center}.topnav-inner .burger{grid-column:1;grid-row:1}.logo{font:500 21px/1 var(--font-display);letter-spacing:-.02em}.burger{width:44px;height:44px;position:relative}.burger span{display:block;position:absolute;width:24px;height:1px;background:var(--fg);left:10px;top:16px}.burger span:nth-child(2){top:22px}.burger span:last-child{top:28px}.burger[aria-expanded=true] span:first-child{transform:translateY(6px) rotate(45deg)}.burger[aria-expanded=true] span:nth-child(2){opacity:0}.burger[aria-expanded=true] span:last-child{transform:translateY(-6px) rotate(-45deg)}.menu-plane{display:none;position:fixed;inset:60px 0 0;z-index:55;background:var(--bg);overflow-y:auto}.menu-plane.is-open{display:block}.menu-plane nav{display:grid;gap:8px;padding:30px 24px}.menu-plane a{font:500 32px/1.5 var(--font-display);min-height:48px}.floating-contact{display:none!important} /* Opening spread: framed photograph, compact name, a distinct closing statement. */ #hero{padding:84px 20px 40px;display:flex;flex-direction:column}.hero-role{font-size:11px;letter-spacing:.075em;text-transform:uppercase;margin-bottom:12px}.hero-name{font-size:clamp(58px,16vw,84px);line-height:.91;letter-spacing:-.04em;margin-bottom:24px}.hero-name span{display:block}.hero-name span:last-child{padding-left:17%}.hero-portrait{width:100%;margin:0 0 22px}.hero-portrait img{width:100%;height:auto}.hero-lead{font:500 clamp(29px,8vw,38px)/1.05 var(--font-display);letter-spacing:-.025em;max-width:17ch;margin:0}.hero-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;font-size:12px}.hero-footer a{min-height:44px;display:flex;align-items:center}.hero-footer a:last-child{border-bottom:1px solid var(--border)} .core-narrative{margin-top:20px;font-size:16px;line-height:1.65}.core-narrative p+p{margin-top:20px}/* About is a biographical note, not a second image-led hero. */ #about{background:var(--surface)}.about-opening{display:grid;grid-template-columns:112px minmax(0,1fr);gap:24px;align-items:center;margin-bottom:30px}.about-opening img{width:112px;height:auto}.experience strong{display:block;font:500 64px/.9 var(--font-display);letter-spacing:-.04em}.experience span{display:block;font-size:13px;line-height:1.45;margin-top:10px}.education{font:500 31px/1.05 var(--font-display);margin-bottom:5px}.education-note{font-size:12px;margin-bottom:24px}.about-body{font-size:16px;line-height:1.65}.disclosure{border-top:1px solid var(--border);margin-top:24px}.disclosure summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:58px;font-size:13px}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary::after{content:"+";font:400 26px var(--font-display)}.disclosure[open] summary::after{content:"−"}.disclosure p{margin:0 0 20px;line-height:1.65}.stage-fact{font-size:14px;line-height:1.6;border-top:1px solid var(--border);padding-top:22px;margin-top:24px}.stage-fact strong{display:block;font:500 26px/1.2 var(--font-display);margin-bottom:10px} /* Lessons: an opening thought followed by an indexed syllabus. */ #lessons{padding-bottom:0;display:flow-root}.lesson-quote{font:500 40px/1.03 var(--font-display);letter-spacing:-.03em;max-width:15ch}.quote-author{font-size:12px;line-height:1.5;margin-top:18px;color:var(--muted)}.lesson-intro{margin-top:28px}.lesson-prose{line-height:1.65}.lesson-index{margin-top:24px;padding:20px 24px 28px;background:var(--surface)}.lesson-index-title{font-size:12px;margin-bottom:10px}.lesson-item{display:grid;grid-template-columns:minmax(0,1fr);padding:18px 0;border-top:1px solid var(--border)}.lesson-number{font:500 35px/1 var(--font-display);color:var(--muted)}.lesson-item h3{font-size:30px;line-height:1.05;margin-bottom:12px}.lesson-item p{font-size:16px;line-height:1.55}.lesson-index .chapter-end{margin-top:8px} /* A dark essay interlude using the same brand ink. */ #development{background:var(--fg);color:var(--bg);padding:36px 24px 40px}.essay-title{font:500 11px/1.5 var(--font-body);text-transform:uppercase;letter-spacing:.13em;margin-bottom:20px}.essay-quote{font:500 44px/1.04 var(--font-display);letter-spacing:-.025em}.essay-author{font-size:12px;line-height:1.6;margin:22px 0 34px;color:var(--bg)}.essay-text{font-size:16px;line-height:1.7}.essay-detail{border-color:color-mix(in oklch,var(--bg) 30%,var(--fg))}.essay-detail p{font-size:16px}.essay-end{margin-top:36px;display:flex;justify-content:space-between;border-top:1px solid color-mix(in oklch,var(--bg) 30%,var(--fg));padding-top:16px;min-height:44px;font-size:12px} /* Performance fills the reading width, with achievement as its conclusion. */ #students{padding:36px 0 48px;background:var(--surface)}.students-title{font-size:28px;line-height:1.15;margin:10px 0 22px}.video-frame{position:relative;width:100%;aspect-ratio:848/464;background:var(--fg)}.video-frame video{display:block;width:100%;height:100%;object-fit:contain}.video-overlay{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;color:var(--bg);padding:0}.video-overlay__play{width:62px;height:62px;display:grid;place-items:center;border:1px solid var(--bg);border-radius:50%;background:color-mix(in oklch,var(--fg) 75%,transparent)}.video-overlay svg{width:27px;height:27px}.video-overlay__caption{display:none}.video-overlay:hover .video-overlay__play{background:var(--fg)}.video-frame.is-playing .video-overlay{display:none}.video-frame.has-started .video-overlay{width:62px;height:62px;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.video-error{position:absolute;inset:10px 10px auto;background:var(--bg);color:var(--fg);padding:10px;font-size:14px}.film-caption{display:flex;justify-content:space-between;gap:24px;font-size:11px;padding:14px 24px;border-bottom:1px solid var(--border)}.students-results{font:500 25px/1.2 var(--font-display);padding:24px 24px 0;max-width:24ch;letter-spacing:-.015em} /* Messages retain the full carousel and reader contract. */ #reviews{padding:36px 0 48px;background:var(--bg)}.reviews-heading{margin-bottom:30px}.reviews-heading h2{font-size:46px;max-width:10ch;margin-top:20px}.reviews-arrows{display:flex;gap:12px;margin-top:14px}.reviews-arrows button{width:44px;border:1px solid var(--border);font-size:20px}.reviews-arrows button:disabled{opacity:.3}.reviews-track{--review-card-width:min(88vw,528px);display:flex;align-items:flex-start;gap:18px;padding:6px 16px 28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;overscroll-behavior-x:contain;scrollbar-width:none}.reviews-track::-webkit-scrollbar{display:none}.reviews-track::after{content:"";flex:0 0 calc(100% - var(--review-card-width) - 18px)}.review-card{position:relative;isolation:isolate;flex:0 0 var(--review-card-width);display:flex;flex-direction:column;scroll-snap-align:start}.review-card::before{content:"";position:absolute;z-index:-1;inset:58px 0 0;background:var(--surface);border-radius:6px 26px 26px 26px}.review-card::after{content:"";position:absolute;z-index:-1;left:18px;bottom:-10px;width:26px;height:22px;background:var(--surface);clip-path:path("M 0 0 L 26 0 C 24 8 16 19 2 21 C 7 15 8 8 0 0 Z")}.review-person{display:flex;align-items:center;gap:10px;min-height:38px;margin:0 8px 20px}.review-avatar{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;background:var(--fg-soft);border-radius:50%;font-size:15px}.review-name{font:500 15px/1.4 var(--font-body);letter-spacing:0}.review-preview{padding:22px 22px 0;font:400 16px/1.6 var(--font-body)}.review-read{align-self:flex-start;margin:20px 22px 16px;padding:0;font-size:14px;text-decoration:underline;text-underline-offset:5px}.review-hint{font-size:11px;padding:8px 24px 0;color:var(--muted)} /* Final journey: who, how, cost, then one clear invitation. */ #pricing{padding:36px 24px 36px;background:var(--surface)}.final-heading{font-size:50px;margin:0 0 24px}.age-copy{font-size:16px;line-height:1.65;margin-bottom:28px}.conditions{margin-top:28px}.condition-row{display:grid;grid-template-columns:95px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--border);font-size:15px;line-height:1.5}.condition-row dt{font-size:12px;padding-top:3px}.condition-row dd{font-size:16px}.price-lockup{display:flex;justify-content:space-between;align-items:end;gap:18px;padding:30px 0 20px;border-bottom:1px solid var(--border)}.price-lockup strong{font:500 64px/.95 var(--font-display);letter-spacing:-.035em}.price-lockup span{font-size:12px;padding-bottom:4px}.practical-notes{margin-top:28px}.practical-notes .condition-row{display:block;border:0;padding:0 0 20px}.practical-notes dt{font-weight:500;font-size:14px;margin-bottom:8px}.practical-notes dd{font-size:15px} #contact{padding:36px 24px 48px;background:var(--fg);color:var(--bg)}#contact .container{padding:0}.contact-copy h2{font-size:48px;line-height:.97;margin-top:20px}.contact-description{margin:24px 0 28px;line-height:1.65}.contact-channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,420px);margin-inline:auto;gap:12px;padding-top:4px}.channel{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;min-height:96px;padding:4px 0;border:0;color:var(--bg);background:transparent;font-size:14px;font-weight:500;text-decoration:none}.channel span{white-space:nowrap}.channel svg{display:block;width:60px;height:60px;padding:16px;flex:none;border:1px solid color-mix(in oklch,var(--bg) 55%,var(--fg));border-radius:50%;background:transparent;color:var(--bg);transition:background .18s,color .18s,border-color .18s}.channel:hover,.channel:focus-visible{background:transparent;color:var(--bg);text-decoration:none}.channel:hover svg,.channel:focus-visible svg{background:var(--bg);color:var(--fg);border-color:var(--bg)}#contact .channel:focus-visible{outline:none}.channel:focus-visible svg{outline:2px solid var(--bg);outline-offset:4px}.contact-number{font-size:16px;color:var(--bg);width:max-content;max-width:100%;margin:24px auto 0;min-height:44px;display:flex;align-items:center}#contact :focus-visible{outline-color:var(--bg)}.site-footer{font-size:11px;padding:24px;border-top:1px solid var(--border);background:var(--surface);display:flex;justify-content:space-between;gap:20px}.site-footer a{min-height:44px} @media(max-width:920px){.reviews-arrows{display:none}}@media(min-width:601px){body{max-width:600px;margin-inline:auto;border-inline:1px solid var(--border)}html{background:var(--surface)}.topnav{max-width:600px}.menu-plane{left:calc(50% - 300px);right:calc(50% - 300px)}.hero-portrait{max-width:460px;align-self:center}.hero-name{font-size:84px}.hero-lead{font-size:38px}.reviews-track{--review-card-width:88%}} @media(max-width:380px){:root{--gutter:20px}.hero-name{font-size:58px}.hero-lead{font-size:29px}.about-opening{gap:20px;grid-template-columns:100px minmax(0,1fr)}.about-opening img{width:100px}.experience strong{font-size:58px}.essay-quote{font-size:40px}.lesson-item h3{font-size:28px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}} .review-reader{position:fixed;inset:0;margin:0;padding:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;border:0;overflow:hidden;background:var(--bg);color:var(--fg)} .review-reader::backdrop{background:var(--bg)} .review-reader-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:88px var(--gutter) calc(116px + env(safe-area-inset-bottom))} .review-reader-article{max-width:680px;margin-inline:auto} .review-reader .review-person{margin-bottom:32px} .review-reader h2{font-family:var(--font-display);font-size:clamp(28px,3vw,36px);font-weight:500;line-height:1.15;letter-spacing:-.025em} .review-reader-text{font-size:18px;line-height:1.75;overflow-wrap:break-word} .review-reader-text p+p{margin-top:24px} .review-close{position:absolute;z-index:2;top:max(16px,env(safe-area-inset-top));right:var(--gutter);width:44px;font-size:34px;line-height:1;background:var(--bg)} .review-close:hover{color:var(--fg);background:var(--surface)} .review-reader-nav{position:absolute;z-index:1;bottom:0;left:0;right:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:16px;max-width:760px;margin:auto;padding:0 24px calc(14px + env(safe-area-inset-bottom));isolation:isolate} .review-reader-nav::before{content:"";position:fixed;z-index:-1;inset:auto 0 0;height:calc(8vh + 44px + env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(to bottom,color-mix(in oklch,var(--bg) 0%,transparent),var(--bg) 55%)} .review-reader-nav button{font-size:14px;padding:0;line-height:1.3} .review-reader-nav button:hover{color:var(--fg);text-decoration:underline;text-underline-offset:5px} #review-previous{grid-column:1;justify-self:start} #review-position{grid-column:2;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)} #review-next{grid-column:3;justify-self:end} .review-reader{max-width:none}.review-reader .review-person{margin:0 0 28px;gap:14px}.review-reader .review-avatar{width:44px;height:44px;flex-basis:44px}.review-reader h2{font-family:var(--font-body);font-size:24px;line-height:1.3;letter-spacing:0}.review-reader-text{font-size:17px;line-height:1.7}.review-reader-nav::before{background:var(--bg);height:80px}.review-reader-nav{padding-top:12px;background:var(--bg)}.review-reader-scroll{padding-top:84px}.review-close{min-height:44px}@media(max-width:920px){#students .video-frame{aspect-ratio:3/2;overflow:hidden}#students .video-frame video{object-fit:cover;object-position:65% 50%}}/* A4-REFINED: existing type, palette and protected compositions. */ body{padding-top:0}.topnav{position:fixed;inset:0 0 auto;max-width:none;background:transparent;border:0;box-shadow:none;backdrop-filter:none;transition:background 180ms}.logo{opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity 180ms,transform 180ms}.topnav.is-solid,.menu-open .topnav{background:var(--bg)}.topnav.is-solid .logo,.menu-open .logo{opacity:1;transform:none;pointer-events:auto} .menu-plane{display:block;inset:0;visibility:hidden;opacity:0;transition:opacity 110ms,visibility 0s 110ms;padding-top:72px}.menu-plane.is-open{visibility:visible;opacity:1;transition:opacity 180ms}.menu-plane nav{max-width:600px;margin:auto;gap:8px}.menu-plane a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:18px;align-items:baseline;font-size:36px;opacity:0;transform:translateY(7px);transition:opacity 100ms,transform 100ms}.menu-plane a span{font:400 11px/1 var(--font-body);color:var(--muted)}.menu-plane.is-open a{opacity:1;transform:none;transition-duration:160ms;transition-delay:calc(var(--i)*22ms)} .about-opening{grid-template-columns:160px minmax(0,1fr);gap:20px;align-items:end}.about-opening img{width:160px;height:auto}.experience strong{font-size:46px;line-height:1}.experience span{font-size:12px}.education{font-size:28px}#about .core-narrative{margin-block:30px}.stage-fact{border:0;padding-top:0;margin-top:24px;font-size:14px}.stage-fact strong{font-size:18px;margin-bottom:8px} .lesson-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:40px;background:transparent;border:0;margin-top:0;padding:40px var(--gutter) 0}.lesson-item,.lesson-item:nth-of-type(even){display:block;min-width:0;max-width:none;margin:0;padding:0;border:0;background:transparent}.lesson-item h3{font-family:var(--font-display);font-size:22px;line-height:1.1;margin:0 0 9px}.lesson-item p{font-family:var(--font-body);font-size:13px;line-height:1.6;max-width:none;overflow-wrap:normal}.development-bridge{font-family:var(--font-body);font-size:18px;line-height:1.55;text-align:left;margin:44px var(--gutter) 30px;max-width:none}@media(max-width:350px){.lesson-index{column-gap:16px;row-gap:36px}.lesson-item h3{font-size:20px}.lesson-item p{font-size:12.5px}}#development{padding-top:26px}.essay-title{font-size:10px;letter-spacing:.08em;margin-bottom:18px} .reviews-track{--review-card-width:83vw;gap:12px;align-items:stretch;padding-left:16px;padding-right:16px}.review-card{min-width:0;background:var(--surface);border-radius:0;padding:18px}.review-card::before,.review-card::after{content:none}.review-person{margin:0 0 18px}.review-avatar{border-radius:2px;background:transparent;border:1px solid var(--border)}.review-name{font:500 23px/1.1 var(--font-display)}.review-preview{padding:0;font-size:16px}.review-read{margin:20px 0 0;margin-top:auto;padding-top:18px}.review-hint{font-variant-numeric:tabular-nums} .price-lockup{flex-direction:column;align-items:flex-start;gap:6px}.price-lockup strong{font-size:46px}.price-lockup span{font-size:13px;padding:0} .contact-channels{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}.channel{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:72px;padding:12px;border:1px solid color-mix(in oklch,var(--bg) 40%,var(--fg));border-radius:0;font:500 21px/1.2 var(--font-display)}.channel svg{width:20px;height:20px;padding:0;border:0;border-radius:0;background:transparent;color:inherit;transition:none}.channel:hover,.channel:focus-visible{background:var(--bg);color:var(--fg)}.channel:hover svg,.channel:focus-visible svg{background:transparent;color:inherit;outline:none}#contact .channel:focus-visible{outline:2px solid var(--bg);outline-offset:4px}.contact-number{font-size:14px;margin:20px 0 0} @media(min-width:601px){.reviews-track{--review-card-width:83%}} @media(max-width:350px){.about-opening{grid-template-columns:150px minmax(0,1fr);gap:16px}.about-opening img{width:150px}.experience strong{font-size:42px}.channel{gap:8px;font-size:20px;padding:10px}} @media(prefers-reduced-motion:reduce){.topnav,.logo,.menu-plane,.menu-plane a{transition:none!important;transform:none!important}} /* Warm architectural palette; A4 typography and subsequent layouts retained. */ :root{--bg:#FBFAF7;--surface:#F1E8DA;--fg:#282A2C;--muted:#626360;--border:#D6D0BE;--accent:#88723F;--bronze:#AD945B;--piano:#9B6C29} #hero{display:grid;grid-template-columns:38% 62%;align-items:start;padding:84px 0 40px} #hero .hero-role,#hero .hero-name{grid-column:1/-1;margin-left:24px;margin-right:24px} #hero .hero-name{margin-bottom:28px}#hero .hero-name span:last-child{padding-left:9%} #hero .hero-portrait{grid-column:2;grid-row:3;width:100%;max-width:none;margin:0;aspect-ratio:4/5;align-self:start} #hero .hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:46% 50%} #hero .hero-lead{grid-column:1;grid-row:3;align-self:end;max-width:none;padding:0 16px 0 24px;font-size:clamp(23px,6.2vw,37px);line-height:1.05;letter-spacing:-.025em} #about .about-opening{grid-template-columns:minmax(0,1fr) 44%;gap:20px;align-items:center} #about .about-opening img{width:100%;height:auto}#about .education{font-size:28px;line-height:1.05;margin-bottom:10px} #about .education-note{margin-bottom:26px}#about .experience strong{font-size:32px;line-height:1.05}#about .experience span{font-size:12px;line-height:1.5;margin-top:8px} .channel:hover{border-color:var(--bronze)} #development,#contact{background:var(--piano);color:var(--bg)} #students{background:var(--bg)}.channel{border-color:var(--border)}.channel:hover,.channel:focus-visible{background:var(--bg);color:var(--piano)} @media(max-width:350px){#about .about-opening{gap:16px}#about .education{font-size:26px}#about .experience strong{font-size:30px}} /* Warm A4 correction: retain A4 font metrics, lighten large fields. */ html{background:var(--bg)} #hero,#about,#pricing{background:var(--bg)} #hero .hero-name{font-family:var(--font-display);font-weight:500;font-size:clamp(58px,16vw,84px);line-height:.91;letter-spacing:-.04em} #hero .hero-lead{font-family:var(--font-display);font-weight:500} #about .education{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em} #about .experience strong{font-family:var(--font-display);font-weight:500;letter-spacing:-.04em;line-height:1} .chapter-end,.disclosure,.stage-fact,.condition-row,.price-lockup,.film-caption{border-color:var(--bronze)} #contact .channel{border-color:var(--bronze)} #contact .channel:hover,#contact .channel:focus-visible{background:var(--bg);color:var(--piano);border-color:var(--bg)} @media(max-width:380px){#hero .hero-name{font-size:58px}} @media(min-width:601px){#hero .hero-name{font-size:84px}} /* Light surface rhythm: champagne / white / champagne / stone / white / white with champagne messages / champagne / stone. */ :root{--stone:#E8E4DD} #hero,#lessons,#pricing{background:var(--surface)} #about,#students,#reviews{background:var(--bg)} #development,#contact{background:var(--stone);color:var(--fg)} #development .essay-author,#contact .channel{color:var(--fg)} #contact .contact-number{color:var(--muted)} #development .essay-detail,#development .essay-end{border-color:var(--bronze)} #reviews .review-card{background:var(--surface)} #contact .channel{background:transparent;border-color:var(--bronze)} #contact .channel:hover,#contact .channel:focus-visible{background:var(--bg);color:var(--fg);border-color:var(--accent)} #contact :focus-visible,#contact .channel:focus-visible{outline-color:var(--accent)} .site-footer{background:var(--stone);color:var(--fg)} /* V2: distinct chapter rhythms, original content and interactions. */ #hero .hero-lead{font-size:clamp(22px,5.8vw,34px);padding-right:8px;line-height:1.12;letter-spacing:-.015em} #about .about-body{max-width:32ch;font-size:16px;line-height:1.7} #about .core-narrative{margin:26px 0 32px 22px;font-size:15px;line-height:1.7} #about .stage-fact{border-top:1px solid var(--bronze);padding:22px 0 0;margin-top:30px;font-size:14px;line-height:1.65} #about .stage-fact strong{display:block;font:500 27px/1.1 var(--font-display);margin-bottom:14px;color:var(--fg)} #lessons .lesson-quote{font-size:29px;line-height:1.15;max-width:19ch;letter-spacing:-.02em} #lessons .quote-author{margin-top:12px;font-size:11px} #lessons .lesson-intro{border-top:1px solid var(--bronze);padding-top:24px;margin-top:26px;font-size:18px;line-height:1.6} #lessons .core-narrative{font-size:15px;line-height:1.7} #lessons .lesson-index{grid-template-columns:minmax(0,1fr);gap:0;padding-top:32px} #lessons .lesson-item,#lessons .lesson-item:nth-of-type(even){padding:20px 0;border-top:1px solid var(--border);margin:0;max-width:none} #lessons .lesson-item h3{font-size:27px;line-height:1.12;margin-bottom:8px} #lessons .lesson-item p{font-size:15px;line-height:1.6;max-width:36ch} #lessons .development-bridge{margin-top:26px;margin-bottom:32px;font-size:17px} #development{background:var(--stone);padding:32px var(--gutter) 36px;display:grid;grid-template-columns:minmax(0,1fr);row-gap:0} #development .essay-title{order:0;margin-bottom:24px} #development .essay-text{order:1;font-size:15px;line-height:1.7} #development .development-intro{display:block;font:400 21px/1.45 var(--font-body);letter-spacing:-.025em;margin-bottom:18px} #development .essay-quote{order:2;font-size:30px;line-height:1.15;letter-spacing:-.02em;border-left:1px solid var(--bronze);padding-left:20px;margin:30px 0 0 22px;max-width:18ch} #development .essay-author{order:3;font-size:11px;margin:12px 0 26px 43px;line-height:1.5} #development .core-narrative{order:4;border-top:1px solid var(--bronze);padding-top:22px;margin:0;font-size:15px;line-height:1.7} #students{padding-top:30px} #students .eyebrow{font:500 11px/1.5 var(--font-body);letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px!important} #students .video-frame{aspect-ratio:16/9} #students .video-frame video{object-fit:cover;object-position:50% 50%} #students .film-caption{border-bottom:0;padding-top:12px;padding-bottom:0;font-size:12px;color:var(--muted)} #reviews .review-person{gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--border)} #reviews .review-avatar{width:42px;height:42px;flex-basis:42px;font:500 24px/1 var(--font-display)} #reviews .review-name{font-size:25px} #reviews .review-card{padding:20px;border-radius:4px} #reviews .review-read{min-height:44px} #pricing .practical-notes{margin-top:22px} #contact .channel svg{width:20px;height:20px;stroke-width:1.4} #contact [data-od-id="contact-max"] svg{width:16px;height:16px;margin:2px;opacity:.82} @media(max-height:660px){.menu-plane nav{gap:2px;padding-top:12px;padding-bottom:20px}.menu-plane a{font-size:30px;min-height:44px;line-height:1.35}} /* V3 — one editorial language, corrected hierarchy. */ #about .about-portrait-entry{display:flex;justify-content:flex-end;margin-bottom:26px} #about .about-portrait-entry figure{width:48%;max-width:200px} #about .about-portrait-entry img{width:100%;height:auto} #about .professional-proofs{margin-bottom:30px} #about .professional-proof{padding:18px 0;border-top:1px solid var(--border)} #about .professional-proof h3{font:500 27px/1.1 var(--font-display);letter-spacing:-.025em;margin:0 0 8px} #about .professional-proof p{font:400 14px/1.55 var(--font-body);color:var(--fg)} #about .professional-proof br{display:none} #about .professional-proof br::after{content:' '} #about .about-body,#about .core-narrative{max-width:none;margin:0;font-size:16px;line-height:1.65} #about .core-narrative{margin-top:22px} #lessons .lesson-quote{font-size:31px;line-height:1.15;max-width:20ch} #lessons .lesson-index{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:34px;padding-top:36px} #lessons .lesson-item,#lessons .lesson-item:nth-of-type(even){border:0;padding:0;margin:0;background:transparent} #lessons .lesson-item h3{font-size:22px;line-height:1.1;margin-bottom:10px;text-wrap:normal} #lessons .lesson-item p{font-size:13px;line-height:1.6;max-width:none} #lessons .development-bridge{margin-top:38px} #development{display:block;background:var(--stone);color:var(--fg);padding:32px var(--gutter) 36px} #development .essay-title{margin-bottom:24px} #development .essay-quote{font-size:31px;line-height:1.14;max-width:22ch;border:0;padding:0;margin:0} #development .essay-author{margin:14px 0 28px;font-size:12px;line-height:1.5} #development .essay-text{font-size:16px;line-height:1.65;margin-left:0} #development .development-intro{font-size:19px;line-height:1.5;letter-spacing:0;margin-bottom:16px} #development .core-narrative{margin-top:26px;padding-top:22px;border-top:1px solid var(--bronze);font-size:16px;line-height:1.65} #reviews .review-person{min-height:76px;align-items:center} #reviews .review-name{font-size:24px} #reviews .review-card{height:376px} #reviews .review-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;line-clamp:7;overflow:hidden;font-size:16px;line-height:1.6;white-space:pre-line} #reviews .review-read{flex-shrink:0;padding-top:12px} .review-reader-text p{white-space:pre-wrap} #pricing .practical-notes{margin-top:24px} #pricing .instrument-note{border:0;padding:0;margin:0 0 20px;background:transparent} #pricing .instrument-note:last-child{margin-bottom:0} #pricing .instrument-note h3{font:500 14px/1.4 var(--font-body);letter-spacing:0;margin:0 0 8px} #pricing .instrument-note p{font-size:14px;line-height:1.55;padding:0} @media(max-width:380px){#lessons .lesson-index{column-gap:18px}#lessons .lesson-item h3{font-size:21px}} /* About: integrated credentials and portrait opening */ #about .about-opening-spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.67fr);gap:20px;align-items:start;margin-bottom:30px} #about .about-opening-spread .about-portrait-entry{margin:0;display:block} #about .about-opening-spread .about-portrait-entry figure{width:100%;max-width:200px;margin:0} #about .about-opening-spread .professional-proofs{margin:0;min-width:0} #about .about-opening-spread .professional-proof{border:0;padding:0;margin:0 0 20px} #about .about-opening-spread .professional-proof:last-child{margin-bottom:0} #about .about-opening-spread .professional-proof h3{font-size:24px;line-height:1.08;margin:0 0 6px;text-wrap:balance} #about .about-opening-spread .professional-proof p{font-size:12px;line-height:1.5;color:var(--muted)} #about .about-opening-spread [data-od-id="proof-teaching"] h3{font-size:28px} #about .about-opening-spread [data-od-id="proof-stage"] h3{font-size:21px}#students .students-title{font-family:var(--font-display);font-weight:500;font-size:31px;line-height:1.1;letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}/* Reviews: compact warm carousel with explicit navigation. */ #reviews{padding-bottom:36px} #reviews .reviews-heading{margin-bottom:12px} #reviews .reviews-arrows{display:flex;justify-content:flex-end;gap:8px;margin-top:8px} #reviews .reviews-arrows button{width:44px;min-height:44px} #reviews .reviews-track{--review-card-width:min(74vw,444px);padding-bottom:16px} #reviews .review-card{height:340px;padding:16px 20px} #reviews .review-person{min-height:64px;padding-bottom:12px;margin-bottom:12px} #reviews .review-read{padding-top:8px}/* Local rhythm and mobile review controls. */ #lessons .lesson-index{padding-top:44px;padding-bottom:48px} @media(max-width:600px){#reviews .reviews-arrows{display:none}} /* Responsive Warm A4: mobile rules above remain the source of truth. */ .desktop-nav{display:none} @media(min-width:601px) and (max-width:767px){#reviews .reviews-arrows{display:none}} @media(min-width:768px){ :root{--gutter:40px;--container:1200px} body{max-width:none;border:0;margin:0} .container{padding-inline:0} .topnav-inner{max-width:1280px;margin:auto;padding-inline:40px} #hero,#about,#lessons,#development,#students,#reviews,#pricing,#contact{padding-left:max(40px,calc((100% - 1200px)/2));padding-right:max(40px,calc((100% - 1200px)/2))} #about,#lessons,#development,#students,#reviews,#pricing,#contact{padding-top:48px;padding-bottom:48px} #hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;grid-template-rows:auto auto 1fr;padding-top:104px;padding-bottom:48px} #hero .hero-role{grid-column:1;grid-row:1;margin:18px 0 16px} #hero .hero-name{grid-column:1;grid-row:2;margin:0 0 28px;font-size:72px} #hero .hero-name span:last-child{padding-left:8%} #hero .hero-lead{grid-column:1;grid-row:3;align-self:start;padding:0;max-width:17ch;font-size:32px} #hero .hero-portrait{grid-column:2;grid-row:1/4;aspect-ratio:4/5;max-height:480px} #about .about-opening-spread{grid-template-columns:minmax(0,1fr) 180px;max-width:500px} #about .about-narrative{max-width:68ch} #lessons .lesson-quote{max-width:25ch} #lessons .lesson-intro,#lessons .core-narrative{max-width:68ch;font-size:16px} #lessons .lesson-index{padding:40px 0 0;gap:28px 32px} #lessons .lesson-item p{font-size:16px} #development .essay-text,#development .core-narrative{max-width:68ch} #development > .development-intro{max-width:45ch;margin-bottom:28px} #students .container,#students .video-frame{max-width:840px;margin-inline:auto} #students .video-frame{aspect-ratio:848/464;overflow:hidden} #students .video-frame video{object-fit:contain} #reviews .reviews-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px} #reviews .reviews-heading h2{max-width:none;font-size:46px} #reviews .reviews-arrows{display:flex;flex-shrink:0;margin:0} #reviews .reviews-track{--review-card-width:calc((100% - 24px)/2);gap:24px;padding:6px 0 16px;scroll-padding-inline:0} #reviews .reviews-track::after{flex-basis:calc(100% - var(--review-card-width) - 24px)} #reviews .review-hint{padding-left:0} #reviews .review-card{height:356px;padding:20px 24px} #pricing .age-copy{max-width:60ch} #pricing .practical-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px} #pricing .instrument-note{margin:0} #pricing .instrument-note p{font-size:16px} #contact .contact-description{max-width:60ch} #contact .contact-channels{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} #contact .channel{justify-content:center} } @media(min-width:1024px){ html{scroll-padding-top:80px} .topnav,.topnav-inner{height:72px} .topnav{background:var(--bg)} .topnav-inner{display:flex;justify-content:space-between;gap:28px} .topnav .logo{opacity:1;pointer-events:auto;transform:none;flex-shrink:0} .topnav .burger{display:none} .desktop-nav{display:flex;align-items:center;gap:clamp(16px,1.7vw,26px)} .desktop-nav a{display:flex;align-items:center;min-height:44px;font-size:12px;white-space:nowrap} #hero{column-gap:72px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding-top:112px;padding-bottom:48px;min-height:620px} #hero .hero-role{margin-top:48px} #hero .hero-name{font-size:84px} #hero .hero-lead{font-size:36px} #hero .hero-portrait{aspect-ratio:1.15;max-height:500px} #about .container{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:64px;align-items:start} #about .chapter-mark{grid-column:1/-1;margin-bottom:28px} #about .about-narrative{grid-column:1;grid-row:2;max-width:60ch} #about .about-opening-spread{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr) minmax(150px,.85fr);gap:24px;margin:0;max-width:none} #about .about-opening-spread .professional-proof{margin-bottom:28px} #about .about-opening-spread .professional-proof p{font-size:14px} #lessons .container{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:64px;grid-template-rows:auto auto auto 1fr;align-items:start} #lessons .chapter-mark{grid-column:1/-1;grid-row:1} #lessons .lesson-quote{grid-column:1;grid-row:2;font-size:34px;max-width:22ch} #lessons .quote-author{grid-column:1;grid-row:3} #lessons .lesson-intro{grid-column:1;grid-row:4;margin-top:22px;padding-top:20px;font-size:16px;line-height:1.6} #lessons .core-narrative{grid-column:2;grid-row:2/5;margin:0;font-size:16px;line-height:1.6} #lessons .core-narrative p+p{margin-top:16px} #lessons .lesson-index{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;padding-top:32px;padding-bottom:0} #lessons .lesson-item h3{font-size:24px} #lessons .lesson-item p{font-size:16px;line-height:1.55} #development{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:64px;align-items:start} #development .essay-title{grid-column:1/-1;grid-row:1;order:0} #development > .development-intro{grid-column:1;grid-row:2;order:0;margin:0 0 28px;font-size:19px} #development .essay-quote{grid-column:1;grid-row:3;order:0;font-size:34px} #development .essay-author{grid-column:1;grid-row:4;order:0;margin-bottom:0} #development .essay-text{grid-column:2;grid-row:2;order:0} #development .core-narrative{grid-column:2;grid-row:3/5;order:0;margin-top:24px} #students .container{max-width:840px} #students .students-title{font-size:34px;margin-bottom:24px} #students .video-frame{max-width:min(840px,calc((100svh - 276px)*1.8276))} #reviews .review-card{height:340px;padding:20px 28px} #pricing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:64px;align-items:start} #pricing .chapter-mark{grid-column:1/-1;grid-row:1} #pricing .final-heading{grid-column:1;grid-row:2;font-size:48px;margin-bottom:22px} #pricing .age-copy{grid-column:1;grid-row:3;margin-bottom:0} #pricing .conditions{grid-column:2;grid-row:2;margin:0} #pricing .price-lockup{grid-column:2;grid-row:3;padding-top:12px;padding-bottom:22px} #pricing .practical-notes{grid-column:1/-1;grid-row:4;margin-top:28px;padding-top:24px;border-top:1px solid var(--bronze);gap:64px} #contact .contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:64px} #contact .contact-copy{grid-column:1;grid-row:1} #contact .contact-description{grid-column:2;grid-row:1;margin:0;align-self:end} #contact .contact-channels{grid-column:1/-1;grid-row:2;margin-top:32px} #contact .contact-number{grid-column:1/-1;grid-row:3} } /* Desktop refinement: editorial hierarchy, protected mobile and tablet. */ @media(min-width:1024px){ #hero{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);column-gap:56px;min-height:640px;padding-top:104px;padding-bottom:56px} #hero .hero-role{margin-top:70px;margin-bottom:20px} #hero .hero-name{margin-bottom:32px} #hero .hero-name span:last-child{padding-left:0} #hero .hero-lead{max-width:16ch;font-size:34px;line-height:1.12} #hero .hero-portrait{aspect-ratio:1280/949;max-height:none;align-self:center} #hero .hero-portrait img{object-fit:contain} #about{padding-top:56px;padding-bottom:56px} #about .container{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);column-gap:clamp(48px,6vw,88px)} #about .about-narrative{max-width:59ch} #about .about-opening-spread{grid-template-columns:minmax(130px,.82fr) minmax(0,1fr);gap:24px;align-items:start} #about .about-opening-spread .about-portrait-entry{grid-column:1;grid-row:1} #about .about-opening-spread .professional-proofs{grid-column:2;grid-row:1;padding-top:4px} #about .about-opening-spread .professional-proof{margin-bottom:24px} #about .about-opening-spread .professional-proof h3{font-size:23px;text-wrap:normal} #about .about-opening-spread [data-od-id="proof-teaching"] h3{font-size:28px} #about .about-opening-spread [data-od-id="proof-stage"] h3{font-size:21px} #about .about-opening-spread .professional-proof p{font-size:13px} #lessons .container{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);column-gap:clamp(48px,6vw,88px);max-width:1120px;margin-inline:auto} #lessons .lesson-quote{max-width:19ch} #lessons .lesson-intro{max-width:36ch} #lessons .core-narrative{max-width:65ch} #lessons .lesson-index{max-width:1120px;margin-inline:auto;padding-top:36px;column-gap:28px} #lessons .lesson-item{padding-top:16px;border-top:1px solid var(--bronze)} #lessons .lesson-item:nth-of-type(even){padding-top:16px;border-top:1px solid var(--bronze)} #lessons .lesson-item h3{font-size:23px} #development{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);column-gap:clamp(64px,8vw,112px);padding-top:56px;padding-bottom:56px} #development .essay-title{grid-column:1/-1;grid-row:1} #development > .development-intro{grid-column:1/-1;grid-row:2;max-width:45ch;font-size:19px;margin-bottom:36px} #development .essay-quote{grid-column:1;grid-row:3;align-self:start;max-width:17ch;font-size:32px;margin-top:28px} #development .essay-author{grid-column:1;grid-row:4;align-self:start;max-width:27ch;margin-top:14px} #development .essay-text{grid-column:2;grid-row:3;max-width:60ch} #development .core-narrative{grid-column:2;grid-row:4;max-width:60ch;margin-top:22px;padding-top:0;border:0} #students .container{max-width:min(840px,calc((100svh - 276px)*1.8276))} #reviews{padding-left:max(40px,calc((100% - 1080px)/2));padding-right:max(40px,calc((100% - 1080px)/2));padding-top:56px;padding-bottom:48px} #reviews .review-card{height:356px;padding:24px 28px} } /* Desktop: continuous narrative and one personal lesson offer. */ @media(min-width:1024px){ #lessons .container{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);grid-template-rows:auto auto 1fr;column-gap:64px} #lessons .lesson-quote{grid-column:1;grid-row:2;font-size:31px;max-width:20ch} #lessons .quote-author{grid-column:1;grid-row:3;margin-top:12px} #lessons .lesson-intro{grid-column:2;grid-row:2;max-width:65ch;border:0;margin:0;padding:0;font-size:16px;line-height:1.6} #lessons .core-narrative{grid-column:2;grid-row:3;max-width:65ch;margin-top:16px} #lessons .lesson-index{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;row-gap:24px;padding-top:32px} #lessons .lesson-item,#lessons .lesson-item:nth-of-type(even){border:0;padding:0} #lessons .lesson-item p{max-width:53ch} #development{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);grid-template-rows:auto auto 1fr;column-gap:80px} #development .essay-title{grid-column:1;grid-row:1;margin:0} #development > .development-intro{grid-column:2;grid-row:1;max-width:60ch;font-size:16px;line-height:1.65;margin:0 0 18px} #development .essay-quote{grid-column:1;grid-row:2;font-size:34px;max-width:19ch;margin:0} #development .essay-author{grid-column:1;grid-row:3;margin:14px 0 0} #development .essay-text{grid-column:2;grid-row:2;max-width:60ch} #development .essay-text .development-intro{display:inline;font:inherit;letter-spacing:inherit;margin:0} #development .core-narrative{grid-column:2;grid-row:3;max-width:60ch;margin-top:20px} #pricing{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:80px} #pricing .chapter-mark{grid-column:1;grid-row:1} #pricing .final-heading{grid-column:1;grid-row:2} #pricing .age-copy{grid-column:1;grid-row:3;max-width:54ch} #pricing .price-lockup{grid-column:1;grid-row:4;border:0;padding:24px 0 0;gap:8px} #pricing .conditions{grid-column:2;grid-row:2/5;align-self:center;margin:0} #pricing .condition-row{display:block;border:0;padding:0;margin-bottom:28px} #pricing .condition-row:last-child{margin-bottom:0} #pricing .condition-row dt{font-size:14px;padding:0;margin-bottom:8px} #pricing .condition-row dd{font-size:16px;line-height:1.6} #pricing .practical-notes{grid-column:1/-1;grid-row:5;margin-top:32px;padding-top:24px;gap:64px} } .lesson-reading{display:contents} @media(min-width:1024px){ #lessons .lesson-reading{display:block;grid-column:2;grid-row:2/4;min-width:0} #lessons .lesson-reading .lesson-intro{max-width:none} #lessons .lesson-reading .core-narrative{max-width:none;margin-top:16px} } #contact .contact-number{margin-inline:auto} /* Requested typography normalization only. */ #about .about-opening-spread .professional-proof h3{font-family:var(--font-display);font-size:24px;font-weight:500;line-height:1.08} #lessons .lesson-item p{font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.6} #content .eyebrow,#development .essay-title{font-family:var(--font-body);font-size:11px;font-weight:500;line-height:1.5;letter-spacing:.13em;text-transform:uppercase} /* PROD FIX: explicit video poster + approved review avatars */ .video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0} .video-frame video{position:relative;z-index:1;background:transparent} .video-frame .video-overlay{z-index:2} .video-frame.is-playing .video-poster,.video-frame.has-started .video-poster{display:none} @media(max-width:920px){#students .video-poster{object-fit:cover;object-position:65% 50%}} @media(min-width:1024px){#students .video-poster{object-fit:contain;object-position:50% 50%}} .review-avatar--photo{overflow:hidden;padding:0;background:transparent} .review-avatar--photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit} .review-reader .review-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit} /* PROD FIX v3: smoother mobile/tablet navigation */ .burger span{ transform-origin:center; transition:transform 240ms ease, opacity 180ms ease; } .menu-plane{ transition:opacity 220ms ease, visibility 0s 220ms; } .menu-plane.is-open{ transition:opacity 260ms ease; } .menu-plane a{ transition:opacity 220ms ease, transform 260ms ease; } .menu-plane.is-open a{ transition-duration:260ms; transition-delay:calc(var(--i) * 32ms); } /* PROD FIX v3: explicit poster must sit above the idle