/* Section 4: separate supplied compositions, live copy, no image distortion. */
.vibe-code{position:relative;isolation:isolate;display:grid;overflow:hidden;background:#353447;color:#fff4e6;margin:0;padding:0}
/* Purple behind the copy, fading to leave the figure and city clear. */
.vibe-code::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#353447f2 0%,#353447e6 32%,#353447d9 44%,#35344780 53%,#35344700 65%)}
.vibe-code-art{display:block;grid-area:1 / 1;align-self:stretch;min-width:0}
.vibe-code-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none}
.vibe-code-copy{grid-area:1 / 1;z-index:1;align-self:center;width:43%;margin-left:6%;padding:40px 0}
.vibe-code-label{display:flex;align-items:center;gap:18px;margin:0 0 19px;font:400 11px/1.5 Georgia,'Times New Roman',serif;letter-spacing:.25em;text-transform:uppercase;color:#ead2d2}
.vibe-code-label::after{content:"";height:1px;flex:1;background:currentColor;opacity:.4}
main>section.vibe-code #code-title{font:400 clamp(38px,4vw,66px)/1.03 Georgia,'Times New Roman',serif;letter-spacing:-.045em;margin:0 0 26px;color:inherit}
.vibe-code-body{max-width:49ch}
.vibe-code-body p{font:400 clamp(16px,1.32vw,21px)/1.45 Georgia,'Times New Roman',serif;margin:0 0 17px;text-wrap:pretty}
.vibe-code-body p:last-child{margin-bottom:0}
/* Wide screens: airy cloud-lilac behind dark text; mobile stays purple. */
@media(min-width:769px){
 .vibe-code{background:#e9e4ef;color:#302b3e}
 .vibe-code::before{background:linear-gradient(90deg,#e9e4eff2 0%,#e9e4efe6 32%,#e9e4efd9 44%,#e9e4ef80 53%,#e9e4ef00 65%)}
 .vibe-code-label{color:#62556f}
}
@media(min-width:769px) and (max-width:1100px){.vibe-code-copy{width:45%;margin-left:5%;padding:32px 0}.vibe-code-art img{object-position:55% center}.vibe-code-body p{font-size:16px}main>section.vibe-code #code-title{font-size:40px}}
@media(max-width:768px){
 .vibe-code{background:#353447;color:#fff4e6}
 .vibe-code::before{display:none}
 .vibe-code-art{align-self:end}
 .vibe-code-art img{width:100%;height:auto;object-fit:initial}
 .vibe-code::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(to bottom,#353447 0%,#353447f2 22%,#353447d9 38%,#35344780 49%,transparent 65%)}
 .vibe-code-copy{width:auto;margin:0;padding:32px 22px 92vw;align-self:start}
 .vibe-code-label{font-size:10px;letter-spacing:.22em;margin-bottom:17px;color:#ead2d2}
 main>section.vibe-code #code-title{font-size:clamp(37px,8vw,54px);margin-bottom:22px}
 .vibe-code-body{max-width:52ch}
 .vibe-code-body p{font-size:17px;line-height:1.45;margin-bottom:16px}
}

/* Section 4's illustrated lesson layout. The supplied picture sources stay intact. */
#approach{background:#39364e;color:#fff4e6}
#approach::before{background:linear-gradient(90deg,rgb(76 68 103 / 96%) 0%,rgb(76 68 103 / 90%) 30%,rgb(76 68 103 / 78%) 42%,rgb(76 68 103 / 40%) 53%,transparent 67%)}
#approach .vibe-code-copy{width:43%;margin-left:6%;padding:clamp(36px,3.5vw,64px) 0}
main > section#approach h2#code-title{font-size:clamp(42px,4.5vw,74px);line-height:1.08;letter-spacing:-.025em;margin-bottom:24px}
#approach #code-title span{display:block;color:#f5c579}
#approach .vibe-code-body{max-width:none}
#approach .vibe-code-body > p{font-size:clamp(20px,1.65vw,26px);line-height:1.45;margin:0 0 28px}
#approach .vibe-code-lessons{display:grid;gap:0;list-style:none;margin:0;padding:0}
#approach .vibe-code-lessons li{display:grid;grid-template-columns:clamp(38px,4vw,64px) minmax(0,1fr);gap:clamp(16px,2vw,32px);padding:20px 0;margin:0}
#approach .vibe-code-lessons li + li{border-top:0}
#approach .vibe-code-lessons li:last-child{padding-bottom:0}
#approach .vibe-code-icon{width:100%;height:auto;color:#f5c579;margin-top:3px;overflow:visible}
/* A soft sunlight glow on icon hover only; no border or change to layout. */
@media (hover:hover) and (pointer:fine){
 #approach .vibe-code-icon{filter:drop-shadow(0 0 8px transparent) drop-shadow(0 0 20px transparent) drop-shadow(0 0 34px transparent);transition:filter 900ms ease}
 #approach .vibe-code-icon:hover{filter:drop-shadow(0 0 8px rgb(255 211 133 / 65%)) drop-shadow(0 0 20px rgb(255 197 106 / 42%)) drop-shadow(0 0 34px rgb(255 190 92 / 24%))}
}
@media (prefers-reduced-motion:reduce){
 #approach .vibe-code-icon{transition:none}
}
#approach .vibe-code-lessons h3{font:400 clamp(18px,1.45vw,23px)/1.25 Georgia,'Times New Roman',serif;letter-spacing:-.01em;text-transform:none;color:#fff4e6;margin:0 0 8px;text-wrap:pretty}
#approach .vibe-code-lessons p{font:400 clamp(16px,1.1vw,18px)/1.5 Georgia,'Times New Roman',serif;letter-spacing:0;margin:0;text-wrap:pretty}
/* Wide-screen copy uses the site's shared reading and heading scale. */
@media(min-width:769px){
 main > section#approach h2#code-title{font-size:var(--heading-size);line-height:1.06;letter-spacing:-.04em;margin-bottom:20px}
 #approach .vibe-code-body > p{font-size:var(--reading-size);line-height:1.5;margin-bottom:24px}
 #approach .vibe-code-lessons h3{font-size:clamp(20px,1.5vw,23px);line-height:1.25;margin-bottom:12px}
 #approach .vibe-code-lessons p{font-size:clamp(15px,1.1vw,17px);line-height:1.5}
}
@media(min-width:769px) and (max-width:1100px){
 #approach .vibe-code-copy{width:48%;margin-left:4%}
 #approach::before{background:linear-gradient(90deg,rgb(76 68 103 / 96%) 0%,rgb(76 68 103 / 90%) 40%,rgb(76 68 103 / 50%) 54%,transparent 70%)}
}
@media(max-width:768px){
 #approach::after{background:linear-gradient(180deg,#292b42 0%,#292b42 49%,rgb(41 43 66 / 92%) 55%,rgb(53 52 71 / 72%) 61%,rgb(53 52 71 / 30%) 69%,transparent 78%)}
 #approach .vibe-code-copy{width:auto;margin:0;padding:34px 24px 92vw}
 main > section#approach h2#code-title{font-size:clamp(38px,10.5vw,58px);margin-bottom:22px}
 #approach .vibe-code-body > p{font-size:19px;line-height:1.5;margin-bottom:24px}
 #approach .vibe-code-lessons li{grid-template-columns:34px minmax(0,1fr);gap:16px;padding:20px 0}
 #approach .vibe-code-lessons h3{font-size:18px;line-height:1.3;margin-bottom:8px}
 #approach .vibe-code-lessons p{font-size:15.5px;line-height:1.55;margin:0}
}