@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');
:root{--bg:#faf7f0;--panel:#eee7e3;--text:#372c32;--muted:#71666a;--red:#674257;--yellow:#f2df9a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.75 'DM Sans',Arial,sans-serif}a{color:inherit}h1,h2,p,figure{margin:0}h1,h2{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;text-transform:uppercase;line-height:.97;font-weight:700;letter-spacing:-.025em}h1{font-size:clamp(64px,6.5vw,96px)}h1 em{display:block;color:var(--red);font-style:normal}h2{font-size:clamp(44px,4.8vw,68px)}h2 em{font-style:normal;color:var(--red)}.eyebrow{font:600 11px/1.5 'DM Sans',sans-serif;letter-spacing:.2em;color:var(--red)}.hero{position:relative;max-width:1440px;margin:auto;display:grid;grid-template-columns:1.03fr 1fr;gap:56px;padding:76px 64px 65px;align-items:center;overflow:hidden}.hero-copy{position:relative;z-index:1}.hero .eyebrow{display:inline-block;border:1px solid var(--red);padding:9px 15px;margin-bottom:28px;color:var(--text)}.dot{display:inline-block;width:6px;height:6px;background:var(--yellow);margin-right:8px}.subtitle{font:600 31px/1.2 'Caveat',cursive;color:var(--red);margin:16px 0 24px;transform:rotate(-2deg);transform-origin:left}.intro{font-size:15px;color:var(--muted);max-width:500px}.intro strong{color:var(--red);font-weight:700}.signup{display:grid;gap:10px;max-width:460px;margin-top:28px}.signup label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}input,button{font:inherit;border-radius:0;min-height:56px;width:100%;padding:16px 19px}input{background:#fffdf8;color:var(--text);border:1px solid #cbbdbf}input::placeholder{color:var(--muted)}button{background:var(--red);color:#fff;border:1px solid var(--red);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;display:flex;gap:20px;align-items:center;justify-content:center;transition:background .15s}button:hover{background:#4f3042}button span{font-size:20px;line-height:1}.form-status{font-size:13px;color:var(--red)}.form-status:empty{display:none}input:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:4px}.hero-visual{position:relative;align-self:center;padding-bottom:60px}.photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.photos figure{position:relative;border:1px solid #cbbdbf}.photos img{display:block;width:100%;height:480px;object-fit:cover}.before{margin-top:30px}.after img{object-position:52% 60%}.after{border-color:var(--red)!important}.photos figcaption{position:absolute;bottom:14px;left:14px;padding:3px 12px;background:#faf7f0;color:var(--text);font-size:10px;font-weight:700;letter-spacing:.18em}.after figcaption{background:var(--yellow);color:var(--text)}.note{margin:14px 0 0;width:calc((100% - 12px)/2);text-align:center;font:600 clamp(19px,2vw,28px)/1.4 'Caveat',cursive;color:var(--red);white-space:nowrap}.arrow-dot{position:relative;display:inline-block}.note svg{position:absolute;left:calc(50% - 3px);top:calc(100% - 15px);width:95px;height:40px;overflow:visible;fill:none;stroke:var(--red);stroke-width:1.5;pointer-events:none}.discover{border-top:1px solid #ddd3cd;border-bottom:1px solid #ddd3cd;padding:85px 24px 90px;background:linear-gradient(90deg,transparent 49.7%,#67425708 50%,transparent 50.3%),#eee7e3;background-size:64px 64px}.section-heading{text-align:center;max-width:750px;margin:0 auto 48px}.section-heading .eyebrow{margin-bottom:20px}.lessons{max-width:800px;margin:auto}.lesson{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:24px;margin-bottom:14px;padding:25px 28px;background:#faf7f0;border-left:2px solid var(--red)}.lesson>span{font:600 52px/.95 'Barlow Condensed',Impact,sans-serif;color:var(--red)}.lesson p{font-size:16px;line-height:1.65}.lesson:nth-child(2),.lesson:nth-child(4){border-color:#927181}.lesson:nth-child(2)>span,.lesson:nth-child(4)>span{color:#927181}.lesson:nth-child(3),.lesson:nth-child(5){border-color:var(--red)}.lesson:nth-child(3)>span,.lesson:nth-child(5)>span{color:var(--red)}.lesson em{color:var(--muted)}.plus{text-align:center;margin:36px auto 0;font-size:14px}.plus span{color:var(--red);font-size:24px;vertical-align:middle;margin-right:9px}.plus strong{color:var(--red)}.bio{display:grid;grid-template-columns:.95fr 1.05fr;max-width:1440px;margin:auto;gap:0;background:#faf7f0}.portrait{position:relative;min-height:690px}.portrait img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 40%}.portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 78%,#faf7f0)}.portrait-note{position:absolute;z-index:1;bottom:42px;left:40px;font:700 40px/1 'Caveat',cursive;color:var(--red);transform:rotate(-6deg);background:#faf7f0;padding:12px 20px}.bio-copy{padding:70px 64px 65px 48px}.bio-copy>.eyebrow{margin-bottom:22px;color:var(--red)}.bio-copy h2{font-size:58px;margin-bottom:28px}.bio-copy p:not(.eyebrow){font-size:14px;color:var(--muted);margin:0 0 18px;line-height:1.85}.signature{font:600 36px/1.2 'Caveat',cursive;color:var(--red);margin-top:26px}.closing{border-top:1px solid #ddd3cd;padding:86px 24px 80px;text-align:center;background:radial-gradient(ellipse at 50% 100%,#f2df9a52,transparent 75%),#f1e4b6}.closing .eyebrow{margin-bottom:24px}.closing h2{font-size:clamp(46px,5vw,72px)}.closing>p:not(.eyebrow){max-width:570px;margin:28px auto 0;color:var(--muted);font-size:15px}.closing .signup{margin:30px auto 0}footer{text-align:center;background:#faf7f0;border-top:1px solid #ddd3cd;padding:23px;color:var(--muted);font-size:11px}@media(min-width:1450px){.hero{padding-top:95px;padding-bottom:85px}}@media(max-width:1050px){.hero{padding:56px 32px;gap:30px}h1{font-size:72px}.photos img{height:430px}.bio-copy{padding:50px 32px}.bio-copy h2{font-size:50px}.portrait{min-height:710px}}@media(max-width:700px){.hero{grid-template-columns:1fr;padding:40px 22px 32px;gap:38px}h1{font-size:clamp(66px,12vw,86px)}.hero .eyebrow{margin-bottom:25px}.intro{font-size:15px;max-width:none}.signup{max-width:none}.subtitle{font-size:30px}.hero-visual{max-width:480px;width:100%;margin:auto;padding-bottom:40px}.photos img{height:410px}.note{font-size:25px}.discover{padding:55px 22px}.section-heading{margin-bottom:30px}.section-heading h2{font-size:48px}.lesson{padding:20px 17px;gap:16px;grid-template-columns:42px 1fr}.lesson>span{font-size:39px}.lesson p{font-size:14px}.plus{font-size:13px}.bio{grid-template-columns:1fr}.portrait{min-height:0;height:540px}.portrait img{object-position:50% 35%}.portrait:after{background:linear-gradient(0deg,#faf7f0,transparent 22%)}.portrait-note{bottom:30px;left:22px;font-size:34px}.bio-copy{padding:25px 22px 48px}.bio-copy h2{font-size:54px}.bio-copy p:not(.eyebrow){font-size:15px}.closing{padding:55px 22px}.closing .eyebrow{font-size:9px}.closing h2{font-size:48px}}@media(max-width:390px){.photos img{height:350px}.note{font-size:21px}.note svg{transform:scaleX(.85);transform-origin:3px 12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}}

/* Original warm palette, retaining the second design’s layout. */
.portrait-note{background:var(--yellow);color:var(--text)}.lesson:nth-child(3),.lesson:nth-child(5){border-color:#b59a48}.lesson:nth-child(3)>span,.lesson:nth-child(5)>span{color:var(--red)}.after{border-color:#b59a48!important}

/* Bring the hero copy and photographs into one compact composition. */
@media(min-width:701px){
 .hero{max-width:1240px;grid-template-columns:1fr 1fr;gap:24px;padding-left:40px;padding-right:40px}
 .hero .intro,.hero .signup{max-width:100%}
}
@media(min-width:701px) and (max-width:1050px){
 .hero{gap:22px;padding-left:28px;padding-right:28px}
}
@media(max-width:700px){.hero{gap:24px}}

/* Connect the original large headline to the photos through alignment. */
@media(min-width:701px){
 .hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:28px;align-items:start}
 .hero-visual{align-self:start;margin-top:69px}
 .hero .photos{gap:10px}
 .hero .before{margin-top:0}
 .hero .after{margin-top:24px}
 .hero .photos img{height:510px}
}
@media(min-width:701px) and (max-width:1050px){
 .hero{gap:20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .hero .photos img{height:440px}
}