/* Electroculture explained simply: page-specific styles (all scoped under .ex-page / .ex) */
.ex-page{max-width:1120px}
.ex{--ex-blue:#3F6C8C;--ex-red:#B5533C;--ex-border:#e6dfcb;--ex-mid:#4a473c}
.ex *{box-sizing:border-box}
.ex h2.ex-sec{font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.6rem);margin:2.2em 0 .15em;color:var(--charcoal)}
.ex .ex-sub{font-size:1.02rem;color:var(--charcoal-alt);margin:0 0 1.1em;line-height:1.5}
.ex p{margin:0 0 .7em}
.ex .ex-big,.ex .ex-body,.ex .ex-try{padding:1.6rem 1.8rem;border-radius:14px;margin:1.2rem 0}
.ex .ex-big{background:var(--cream-alt);border-left:8px solid var(--gold)}
.ex .ex-body{background:#ece9d3;border-left:8px solid var(--olive-dark)}
.ex .ex-try{background:#ece9d3}
.ex .ex-big h2,.ex .ex-body h2,.ex .ex-try h2,.ex .ex-basalt h2{font-family:var(--font-display);font-size:clamp(1.6rem,2.8vw,2.1rem);margin:0 0 .4em}
.ex .ex-big p,.ex .ex-body p,.ex .ex-try p{font-size:1.08rem;line-height:1.65;margin:0 0 .7em}
.ex .ex-big p:last-child,.ex .ex-try p:last-child{margin-bottom:0}
.ex b{color:var(--olive-dark)}
/* tags */
.ex .ex-tgs{display:flex;gap:6px;flex-wrap:wrap;margin-top:.7em}
.ex .ex-tg{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:20px;color:#fff;line-height:1.5;font-family:var(--font-body)}
.ex .ex-tg.ex-m{background:var(--ex-blue)}.ex .ex-tg.ex-i{background:var(--olive-dark)}.ex .ex-tg.ex-g{background:var(--ex-red)}
.ex .ex-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1rem 0 .5rem}
.ex .ex-legend>div{background:#fff;border:1px solid var(--ex-border);border-radius:10px;padding:.9rem 1.1rem;font-size:.95rem;line-height:1.45;color:var(--ex-mid)}
.ex .ex-legend .ex-tg{display:inline-block;margin:0 0 .45em}
.ex .ex-legend p{margin:0}
/* diagram */
.ex .ex-dia{position:relative;border-radius:12px;overflow:hidden;border:2px solid var(--gold);background:#fff;margin:.4rem 0 0}
.ex .ex-dia img{display:block;width:100%;height:auto;max-width:none}
.ex .ex-mk,.ex .ex-pm{position:absolute;transform:translate(-50%,-50%);border-radius:50%;color:#fff;border:2px solid #fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--font-body);line-height:1}
.ex .ex-mk{width:clamp(22px,3.1vw,36px);height:clamp(22px,3.1vw,36px);background:var(--olive-dark);font-size:clamp(.8rem,1.7vw,1.2rem);box-shadow:0 2px 8px rgba(0,0,0,.35);margin:0!important}
.ex .ex-pm{width:clamp(22px,2.8vw,32px);height:clamp(22px,2.8vw,32px);font-size:clamp(.9rem,2vw,1.4rem);margin:0!important}
/* steps */
.ex .ex-steps{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.1rem 0 0}
.ex .ex-step{display:flex;gap:14px;background:#fff;border:1px solid var(--ex-border);border-radius:12px;padding:1.1rem 1.2rem}
.ex .ex-num{flex:0 0 38px;height:38px;border-radius:50%;background:var(--olive-dark);color:#fff;font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center}
.ex .ex-step h3{font-family:var(--font-display);font-size:1.35rem;margin:0 0 .35em;line-height:1.2}
.ex .ex-step p{font-size:.98rem;line-height:1.6;margin:0;color:var(--ex-mid)}
.ex .ex-pl{color:var(--olive-dark)}
/* generic card grids */
.ex .ex-cards,.ex .ex-why,.ex .ex-strip,.ex .ex-two,.ex .ex-parts{display:grid;gap:16px;margin:1.1rem 0 0}
.ex .ex-cards,.ex .ex-why,.ex .ex-strip{grid-template-columns:repeat(3,1fr)}
.ex .ex-two{grid-template-columns:repeat(2,1fr)}
.ex .ex-card,.ex .ex-part,.ex .ex-why>.ex-w,.ex .ex-two>.ex-w,.ex .ex-strip>.ex-t{background:#fff;border:1px solid var(--ex-border);border-radius:12px;padding:1.1rem 1.2rem 1.2rem;display:block}
.ex .ex-card{display:flex;flex-direction:column;gap:.5rem}
.ex .ex-ico svg{width:96px;height:72px;background:var(--cream);border-radius:8px;padding:4px;display:block}
.ex .ex-card h4,.ex .ex-part h4,.ex .ex-strip h4{font-family:var(--font-display);font-size:1.35rem;margin:0 0 .25em;color:var(--charcoal);line-height:1.2}
.ex .ex-card .ex-one{font-size:.98rem;font-weight:600;color:var(--olive-dark);margin:0 0 .3em}
.ex .ex-card p,.ex .ex-part p,.ex .ex-strip p,.ex .ex-why p,.ex .ex-two p{font-size:.95rem;line-height:1.55;color:var(--ex-mid);margin:0}
.ex .ex-card .ex-does{margin-top:.5rem;padding-top:.6rem;border-top:1px dashed var(--ex-border);font-size:.92rem;color:var(--charcoal)}
.ex .ex-why>.ex-w{border-top:6px solid var(--gold)}
.ex .ex-why h3,.ex .ex-two h3{font-family:var(--font-display);font-size:1.45rem;margin:0 0 .35em}
.ex .ex-two>.ex-w{border-left:8px solid var(--ex-blue)}
.ex .ex-strip>.ex-t{text-align:center}
.ex .ex-strip svg{width:100%;height:110px;background:var(--cream);border-radius:8px}
.ex .ex-strip h4{margin:.6em 0 .25em}
/* plan view */
.ex .ex-align{display:grid;grid-template-columns:1.15fr 1fr;gap:22px;margin:1.1rem 0 0;align-items:center}
.ex .ex-align svg{width:100%;height:auto;display:block;border-radius:12px}
.ex .ex-align p{font-size:1.02rem;line-height:1.6;color:var(--ex-mid)}
/* storm */
.ex .ex-storm p{font-size:1.08rem;margin:0 0 .3em}
.ex .ex-storm .ex-tgs{margin:0 0 1em}
/* basalt */
.ex .ex-basalt{background:#2f2d28;color:#f3efe3;border-radius:14px;padding:1.8rem;display:grid;grid-template-columns:minmax(220px,38%) 1fr;gap:26px;align-items:center;margin:1.2rem 0}
.ex .ex-basalt svg{width:100%;height:auto;display:block}
.ex .ex-basalt h2{color:#e6cf8f}
.ex .ex-basalt p{font-size:1.02rem;line-height:1.65;color:#ece7d8;margin:0 0 .7em}
.ex .ex-basalt b{color:#e6cf8f}
/* parts + cw1 drawing */
.ex .ex-pw{display:grid;grid-template-columns:minmax(240px,36%) 1fr;gap:18px;margin:1.1rem 0 0;align-items:start}
.ex .ex-pw img{width:100%;height:auto;display:block;border-radius:12px;border:2px solid var(--gold)}
.ex .ex-pw .ex-parts{grid-template-columns:1fr 1fr;margin:0}
.ex .ex-build{margin:1rem 0 0;padding:1.3rem 1.6rem;background:#2f2d28;color:#f3efe3;border-radius:12px;font-size:1.02rem;line-height:1.6}
.ex .ex-build b{color:#e6cf8f}
.ex .ex-sum{margin:2rem 0 0;text-align:center;font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.3;color:var(--olive-dark)}
.ex-next{margin:2.4rem 0 0;padding:1.8rem;text-align:center;background:var(--cream-alt);border-radius:14px}
.ex-next h2{margin:0 0 .3em}
.ex-next-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:1.2em 0 0}
.ex-notice{font-size:.82rem;color:var(--charcoal-alt);margin:1.6rem 0 0;line-height:1.55}
@media (max-width:960px){
  .ex .ex-cards,.ex .ex-why,.ex .ex-strip{grid-template-columns:repeat(2,1fr)}
  .ex .ex-pw{grid-template-columns:1fr}
  .ex .ex-pw img{max-width:420px;margin:0 auto}
}
@media (max-width:720px){
  .ex .ex-steps,.ex .ex-align,.ex .ex-basalt,.ex .ex-two,.ex .ex-legend{grid-template-columns:1fr}
  .ex .ex-cards,.ex .ex-why,.ex .ex-strip,.ex .ex-pw .ex-parts{grid-template-columns:1fr}
  .ex .ex-big,.ex .ex-body,.ex .ex-try{padding:1.2rem 1.2rem}
}

/* ---- refined pass: calmer, more air, fewer boxes ---- */
.ex{line-height:1.7}
.ex h2.ex-sec{font-weight:400;margin:3.4em 0 .2em}
.ex h2.ex-sec::after{content:"";display:block;width:56px;height:2px;background:var(--gold);margin-top:.55em}
.ex .ex-sub{margin:0 0 1.6em;line-height:1.6}
.ex .ex-big,.ex .ex-body,.ex .ex-try{border:0;border-radius:20px;padding:2.4rem 2.6rem;margin:1.6rem 0}
.ex .ex-body,.ex .ex-try{background:#efecd9}
.ex .ex-big h2,.ex .ex-body h2,.ex .ex-try h2{font-weight:400}
.ex .ex-big p,.ex .ex-body p,.ex .ex-try p{line-height:1.75}
.ex .ex-dia{border:1px solid #d9cfb4;border-radius:18px;box-shadow:0 14px 40px rgba(58,56,47,.10)}
.ex .ex-steps{gap:0 3rem;margin:1.6rem 0 0}
.ex .ex-step{background:transparent;border:0;border-top:1px solid #ddd3b8;border-radius:0;padding:1.7rem .2rem 1.9rem;gap:1.1rem}
.ex .ex-num{background:transparent;border:1.5px solid var(--olive-dark);color:var(--olive-dark);font-family:var(--font-display);font-weight:400;font-size:1.25rem;flex:0 0 42px;height:42px}
.ex .ex-step h3{font-weight:400;margin:.1em 0 .5em}
.ex .ex-step p{line-height:1.7}
.ex b.ex-pl{display:block;font-family:var(--font-display);font-style:italic;font-weight:400;font-size:1.15rem;line-height:1.45;margin:0 0 .6em}
.ex .ex-pl+br{display:none}
.ex .ex-cards,.ex .ex-why,.ex .ex-strip,.ex .ex-two,.ex .ex-parts{gap:1.4rem;margin:1.6rem 0 0}
.ex .ex-card,.ex .ex-part,.ex .ex-why>.ex-w,.ex .ex-two>.ex-w,.ex .ex-strip>.ex-t{background:rgba(255,255,255,.55);border:1px solid #e3dbc3;border-radius:18px;padding:1.5rem 1.5rem 1.6rem}
.ex .ex-why>.ex-w{border-top:1px solid #e3dbc3}
.ex .ex-two>.ex-w{border-left:4px solid var(--ex-blue)}
.ex .ex-card h4,.ex .ex-part h4,.ex .ex-strip h4,.ex .ex-why h3,.ex .ex-two h3{font-weight:400}
.ex .ex-card p,.ex .ex-part p,.ex .ex-strip p,.ex .ex-why p,.ex .ex-two p,.ex .ex-align p{line-height:1.7}
.ex .ex-card .ex-does{border-top:1px solid #e3dbc3}
.ex .ex-ico svg,.ex .ex-strip svg{background:#f3eee0;border-radius:12px}
.ex .ex-basalt{border-radius:20px;padding:2.4rem;margin:2.4rem 0 1.6rem}
.ex .ex-build{border-radius:18px;padding:1.6rem 1.9rem}
.ex .ex-pw img{border:1px solid #d9cfb4;border-radius:16px}
.ex .ex-sum{margin:3.4rem 0 0;font-weight:400}
.ex .ex-sum::before{content:"";display:block;width:56px;height:2px;background:var(--gold);margin:0 auto 1.6rem}
.ex .ex-tg{font-weight:600;letter-spacing:.1em;border:1.5px solid currentColor}
.ex .ex-tg.ex-m{color:var(--ex-blue);background:rgba(63,108,140,.08)}
.ex .ex-tg.ex-i{color:var(--olive-dark);background:rgba(118,116,80,.10)}
.ex .ex-tg.ex-g{color:var(--ex-red);background:rgba(181,83,60,.08)}
.ex .ex-basalt .ex-tg{color:#f1ead2;background:rgba(255,255,255,.08)}
.ex .ex-legend{gap:1.2rem}
.ex .ex-legend>div{background:rgba(255,255,255,.55);border:1px solid #e3dbc3;border-radius:16px;padding:1.2rem 1.3rem}
@media (max-width:720px){.ex .ex-step{padding:1.4rem 0 1.5rem}.ex .ex-big,.ex .ex-body,.ex .ex-try{padding:1.5rem 1.4rem}}