/* CSIE page components, on the shared shell (see /assets/css/shell.css). */
:root{--err:#B42318;--ok:#067647}
.wrap--narrow{width:min(100% - 2.5rem,760px);margin-inline:auto}.wrap--mid{width:min(100% - 2.5rem,980px);margin-inline:auto}
.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex:none}
.kicker{font:700 .9rem var(--f);color:var(--or-d);margin:0 0 .9rem;display:inline-flex;align-items:center;gap:.55rem}
.kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--or);flex:none}.kicker a{color:inherit;text-decoration:none}.kicker--light{color:#FFD2B0}.kicker--light::before{background:var(--or)}
.link-arrow{display:inline-flex;gap:.4rem;align-items:center;font-weight:700;color:var(--or-d);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:1px}
.link-arrow:hover{color:var(--or);gap:.65rem}.link-arrow--light{color:#fff}.link-arrow--light:hover{color:var(--leaf)}
.btn--accent{background:var(--or);border-color:var(--or);color:#fff}.btn--accent:hover{background:var(--or-d);border-color:var(--or-d);color:#fff}
.btn--outline{background:transparent;border-color:var(--ink);color:var(--ink)}.btn--outline:hover{background:var(--ink);color:#fff}
.hero .btn--ghost,.section--dark .btn--ghost,.cta .btn--ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}.hero .btn--ghost:hover,.section--dark .btn--ghost:hover,.cta .btn--ghost:hover{background:#fff;color:var(--ink)}
.btn--block{display:flex;width:100%;margin-top:.7rem}.btn-row--center{justify-content:center}
.lead{color:var(--mut)}.hero .lead{color:#dbe8dd}
body.app-csie{background:var(--paper)}
main{min-height:50vh}
.announce{background:var(--or-l);color:var(--ink)}
/* Hero */
.hero{position:relative;color:#fff;background:radial-gradient(1000px 520px at 90% -10%,rgba(47,107,74,.7) 0,transparent 60%),linear-gradient(160deg,var(--ink),var(--ink-2));overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.4px);background-size:26px 26px;mask-image:linear-gradient(90deg,transparent,#000 70%);pointer-events:none}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:center;padding:clamp(3.5rem,8vw,6.5rem) 0}
.hero h1{color:#fff;font-size:clamp(2.2rem,5.2vw,4rem)}
.hero .lead{color:#d6e8e5}
.hero__card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);border-radius:22px;padding:2rem}
.hero__goal-label{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--or);margin:0}
.hero__goal{font:700 clamp(4rem,9vw,6.5rem)/1 var(--fd);margin:.2rem 0 .4rem;color:#fff}
.hero__goal sup{font:600 1rem var(--f);color:var(--or);margin-left:.5rem;vertical-align:top;position:relative;top:.9rem}
.hero__card .link-arrow{color:#fff}

.stats{background:#fff;border-bottom:1px solid var(--line)}
.stats__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.6rem 0}
.stats__in div{display:flex;flex-direction:column;gap:.15rem;padding-left:1.1rem;border-left:3px solid var(--or)}
.stats__in strong{font:700 2rem/1 var(--fd);color:var(--ink-2)}
.stats__in span{font-size:.88rem;color:var(--mut)}

/* Sections */
.section{padding:clamp(3rem,6vw,5.5rem) 0}
.section--tight{padding:2rem 0 4rem}
.section--tint{background:var(--paper);border-block:1px solid var(--line)}
.section--dark{background:linear-gradient(160deg,var(--ink),var(--ink-2));color:#d6e8e5}
.section--dark h2,.section--dark h3,.section--dark h3 a{color:#fff;text-decoration:none}
.section-head{margin-bottom:2.2rem}
.section-head--row{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap}
.section-head h2{margin-bottom:.3em}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}

/* Cards */
.pillar{display:block;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;text-decoration:none;color:var(--txt);box-shadow:var(--sh);transition:transform .2s,box-shadow .2s,border-color .2s}
a.pillar:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line);color:var(--txt)}
.pillar h3,.pillar .h3{margin-bottom:.4em}.pillar p{color:var(--mut);font-size:.97rem}
.pillar__icon{display:inline-grid;place-items:center;width:3.2rem;height:3.2rem;border-radius:14px;background:var(--tint);color:var(--green);font-size:1.5rem;margin-bottom:1.1rem}
.pillar .link-arrow{margin-top:.4rem}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.card__media{display:block;aspect-ratio:1200/630;background:var(--tint);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card__media img{transform:scale(1.04)}
.card__ph{display:grid;place-items:center;height:100%;background:linear-gradient(135deg,var(--tint),var(--or-l))}.card__ph img{width:auto;height:96px;opacity:.9}
.card__body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.eyebrow{font:700 .72rem/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--or-d);margin:0 0 .6rem;min-height:.72rem}
.eyebrow a{color:inherit;text-decoration:none}
.card__title{font-size:1.2rem;margin-bottom:.5rem}.card__title a{color:var(--ink);text-decoration:none}.card__title a:hover{color:var(--green)}
.card__text{color:var(--mut);font-size:.96rem;flex:1}
.meta{font-size:.85rem;color:var(--mut);margin:.6rem 0 0}
.program{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;box-shadow:var(--sh);display:flex;flex-direction:column;gap:.2rem}
.program--lead{background:linear-gradient(160deg,var(--ink-2),var(--green));color:#d6e8e5;border:0}
.program--lead h3 a{color:#fff}.program--lead .tag{background:rgba(255,255,255,.14);color:#fff}.program--lead .link-arrow{color:var(--or)}
.program h2,.program h3{margin-bottom:.35em}.program h2 a,.program h3 a{text-decoration:none;color:inherit}
.program p{color:inherit;opacity:.9}
.program__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}
.tag{display:inline-flex;gap:.35rem;align-items:center;font-size:.8rem;font-weight:600;padding:.35rem .7rem;border-radius:999px;background:var(--tint);color:var(--ink-2)}
.tag--ok{background:#dcfae6;color:#05603a}
.vcard{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:1.6rem}
.vcard__play{display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--or);color:#2b1b00;margin-bottom:1rem}
.vcard p{color:#cfe5e1;font-size:.95rem;margin:0}
.cta{background:linear-gradient(120deg,var(--or),#ffcf70);color:#2b1b00;padding:3.2rem 0}
.cta__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta h2{color:#2b1b00;margin-bottom:.3em}.cta p{margin:0;max-width:40rem}.cta .btn-row{margin:0}
.cta .btn--ghost{color:#2b1b00;border-color:#2b1b00}.cta .btn--ghost:hover{background:rgba(43,27,0,.08);color:#2b1b00}
.cta .btn--accent{background:var(--ink);color:#fff}.cta .btn--accent:hover{background:var(--green);color:#fff;box-shadow:none}

/* Page head & breadcrumbs */
.page-head{background:linear-gradient(180deg,var(--paper),var(--paper));border-bottom:1px solid var(--line);padding:2.4rem 0 2.6rem}
.page-head h1{margin-bottom:.3em}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0 0 1.2rem;padding:0;font-size:.85rem;color:var(--mut)}
.crumbs li+li::before{content:"›";margin-right:.35rem;color:#9bb0ad}
.crumbs a{color:var(--mut)}

/* Blog toolbar */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{padding:.5rem .95rem;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--txt);text-decoration:none;font-weight:600;font-size:.9rem}
.chip small{color:var(--mut);font-weight:500;margin-left:.2rem}
.chip:hover{border-color:var(--green)}.chip.is-on{background:var(--ink-2);color:#fff;border-color:var(--ink-2)}.chip.is-on small{color:#bcdad6}
.search{position:relative;min-width:min(100%,300px)}
.search input{width:100%;padding:.8rem 3rem .8rem 1.1rem;border:1px solid var(--line);border-radius:999px;font:inherit;background:#fff}
.search button{position:absolute;right:.3rem;top:50%;transform:translateY(-50%);border:0;background:var(--ink-2);color:#fff;width:2.4rem;height:2.4rem;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.search--center{margin:1.5rem auto;max-width:420px}
.pagination{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:3rem}
.pg{min-width:2.5rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;font-weight:600;text-align:center;color:var(--txt)}
.pg:hover{border-color:var(--green)}.pg.is-current{background:var(--ink-2);color:#fff;border-color:var(--ink-2)}.pg--gap{border:0;background:none}
.empty{text-align:center;padding:4rem 1rem;color:var(--mut)}

/* Article */
.article__head{padding:2.4rem 0 1.6rem}
.article__head h1{font-size:clamp(2rem,4.4vw,3.1rem)}
.byline{color:var(--mut);font-size:.95rem}
.article__cover{margin:0 0 2.4rem}
.article__cover img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:18px;box-shadow:var(--sh)}
.article__layout{position:relative}
.prose{font-size:1.1rem;line-height:1.8;color:#1c2d33}
.prose h2{font-size:1.7rem;margin:2em 0 .6em}.prose h3{font-size:1.35rem;margin:1.7em 0 .5em}.prose h4{margin:1.4em 0 .4em}
.prose p,.prose ul,.prose ol{margin:0 0 1.25em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--green);font-weight:500}
.prose img{border-radius:12px;margin:1.6em auto;box-shadow:var(--sh)}
.prose figure{margin:1.6em 0}.prose figcaption{font-size:.88rem;color:var(--mut);text-align:center}
.prose blockquote{margin:1.8em 0;padding:1rem 1.6rem;border-left:4px solid var(--or);background:var(--or-l);border-radius:0 12px 12px 0;font-family:var(--fd);font-size:1.18rem}
.prose table{width:100%;border-collapse:collapse;display:block;overflow-x:auto}.prose th,.prose td{border:1px solid var(--line);padding:.6rem .8rem;text-align:left}
.prose iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px}
.prose pre{overflow:auto;background:var(--ink);color:#e8f3f1;padding:1rem;border-radius:10px}
.share{display:flex;gap:.6rem;align-items:center;margin:2rem 0;padding:1rem 0;border-block:1px solid var(--line)}
.share p{margin:0 .4rem 0 0;font-weight:700;color:var(--mut);font-size:.9rem}
.share a,.share button{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink-2);cursor:pointer;text-decoration:none}
.share{flex-wrap:wrap}.share__msg{flex-basis:100%;font-size:.85rem;color:var(--mut)}.share__msg:empty{display:none}
.share a:hover,.share button:hover{background:var(--ink-2);color:#fff}
.author-box{display:flex;gap:1.3rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:5px solid var(--or);border-radius:var(--r);padding:1.5rem;margin:1rem 0 3.5rem;box-shadow:var(--sh)}
.author-box p{margin:0 0 .5rem;color:var(--mut);font-size:.96rem}.author-box .author-box__name{color:var(--ink);font:700 1.25rem var(--fd);margin:0}.author-box .author-box__name a{color:inherit;text-decoration:none}.author-box__label{font:700 .72rem var(--f)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--or-d)!important}.author-box__role{color:var(--green)!important;font-weight:600}
/* Avatars */
.ava{flex:none;border-radius:50%;display:inline-grid;place-items:center;object-fit:cover;font:700 1em var(--fd);color:#fff;background:var(--ink-2);vertical-align:middle;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.ava--sm{width:2.4rem;height:2.4rem;font-size:1rem}.ava--md{width:3.4rem;height:3.4rem;font-size:1.3rem}.ava--lg{width:5rem;height:5rem;font-size:1.9rem}.ava--xl{width:7.5rem;height:7.5rem;font-size:2.8rem}
.ava--c0{background:#10241C}.ava--c1{background:#B8470A}.ava--c2{background:#2F6B4A}.ava--c3{background:#9a3412}.ava--c4{background:#3b5b92}.ava--c5{background:#6d4c8f}
.card__foot{display:flex;align-items:center;gap:.7rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}.card__foot .meta{margin:0;line-height:1.35}.card__foot .meta a{color:var(--txt);font-weight:600;text-decoration:none}.card__foot .meta a:hover{color:var(--green)}
.byline .ava{margin-right:.4rem}.byline a{color:inherit;font-weight:600}
.author-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:2rem 1.6rem;text-align:center;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s}.author-card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.author-card .ava{margin-bottom:1rem}.author-card h2{margin-bottom:.2em}.author-card h2 a{color:var(--ink);text-decoration:none}.author-card__role{color:var(--green);font-weight:600;font-size:.95rem;margin-bottom:.6rem}.author-card__bio{color:var(--mut);font-size:.95rem}.author-card__foot{display:flex;justify-content:center;align-items:center;gap:.8rem;margin:1rem 0 0}
.author-hero{display:flex;gap:2rem;align-items:center}.page-head--author .lead{margin-bottom:.8rem}
/* Logo placements */
.logo-badge{display:inline-block;background:#fff;border-radius:14px;padding:.55rem .9rem;margin-bottom:1.2rem;box-shadow:0 6px 20px rgba(0,0,0,.18)}.logo-badge img{height:54px;width:auto}.logo-badge--plain{box-shadow:none;padding:0;margin-bottom:1rem}.logo-badge--plain img{height:70px;margin:0 auto}
.footer-logo{display:inline-block;background:#fff;border-radius:14px;padding:.6rem 1rem;box-shadow:0 6px 20px rgba(0,0,0,.2)}.footer-logo img{height:64px;width:auto}
.facts__logo{height:64px;width:auto;margin-bottom:1rem}
.page-head{position:relative;overflow:hidden}.page-head::after{content:"";position:absolute;right:max(1.5rem,calc((100vw - 1180px)/2));top:50%;transform:translateY(-50%);width:240px;height:122px;background:url(/assets/csie/img/logo.webp) center/contain no-repeat;opacity:.1;pointer-events:none}
.page-head>.wrap{position:relative;z-index:1}

/* About / facts / forms */
.about{display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:start}
.facts{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;box-shadow:var(--sh);position:sticky;top:7rem}
.facts h2{font-size:1.25rem}.facts dt{font:700 .75rem var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--or-d);margin-top:1rem}
.facts dd{margin:.15rem 0 0}.facts address{font-style:normal}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.3rem,3vw,2.2rem);box-shadow:var(--sh)}
.form{display:grid;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label,.choices legend{font-weight:600;font-size:.93rem}.field label b{color:var(--err)}.opt{font-weight:400;color:var(--mut)}
.field input,.field textarea,.nl-form input{font:inherit;padding:.85rem 1rem;border:1.5px solid #c9d6d4;border-radius:10px;background:#fff;color:var(--txt);width:100%}
.field input:focus,.field textarea:focus,.nl-form input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(23,117,109,.18)}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--err)}
.field__err{color:var(--err);font-size:.88rem}
.form-note{font-size:.85rem;color:var(--mut);margin:0}
.choices{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}.choices legend{margin-bottom:.5rem;padding:0}
.choice input{position:absolute;opacity:0}
.choice span{display:inline-block;padding:.6rem 1rem;border:1.5px solid #c9d6d4;border-radius:999px;font-weight:600;font-size:.92rem;cursor:pointer;background:#fff}
.choice input:checked+span{background:var(--ink-2);border-color:var(--ink-2);color:#fff}
.choice input:focus-visible+span{outline:3px solid var(--or);outline-offset:2px}
.grid-2--form,.form .grid-2{gap:1.1rem}
.alert{padding:1rem 1.2rem;border-radius:12px;margin-bottom:1.2rem;font-weight:500}
.alert--ok{background:#dcfae6;color:#05603a;border:1px solid #abefc6}.alert--err{background:#fee4e2;color:#912018;border:1px solid #fecdca}
.social{display:flex;gap:.6rem;list-style:none;margin:1rem 0 0;padding:0}
.social a{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,.1);color:#fff}.social a:hover{background:var(--or);color:#2b1b00}
.social--dark a{background:var(--tint);color:var(--ink-2)}.social--dark a:hover{background:var(--ink-2);color:#fff}
.vitem__media{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--ink);margin-bottom:1rem}
.vitem__media iframe,.vitem__media video{width:100%;height:100%;border:0;display:block}
.vitem__soon{height:100%;display:grid;place-content:center;justify-items:center;gap:.4rem;color:#9ccbc5;background:linear-gradient(135deg,var(--ink-2),var(--green));font-size:2rem}
.vitem__soon span{font:600 .8rem var(--f);letter-spacing:.14em;text-transform:uppercase}
.vitem p{color:var(--mut);font-size:.95rem}

/* Responsive */
@media (max-width:1020px){
  .hero__in,.about{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}
  .facts{position:static}.stats__in{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .page-head::after{display:none}.author-hero{flex-direction:column;text-align:center}.author-box{flex-direction:column}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .prose{font-size:1.05rem}.hero__card{padding:1.5rem}.toolbar{flex-direction:column;align-items:stretch}
  .cta__in,.section-head--row{align-items:flex-start}.btn-row .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.site-header,.site-footer,.share,.progress,.cta{display:none}body{background:#fff}.prose{font-size:11pt}}

/* --- v3 additions: announcement bar, notices, program/video pages, author bios --- */
.announce{background:var(--or);color:#2b1b00;font-size:.92rem;font-weight:600}
.announce__in{padding:.55rem 0;text-align:center}.announce p{margin:0}
.announce a{color:#2b1b00;text-decoration:underline;white-space:nowrap;margin-left:.4rem}.announce a:hover{color:#000}
.notice{display:flex;gap:.7rem;align-items:flex-start;background:var(--or-l);border:1px solid #f1d58a;border-radius:12px;padding:.9rem 1.1rem;margin:0 0 1.8rem;font-size:.95rem;color:#4a3300}
.notice .i{margin-top:.2rem;color:var(--or-d)}.notice a{color:#4a3300;font-weight:600}
.program__img{display:block;margin:-1.8rem -1.8rem 1.1rem;border-radius:var(--r) var(--r) 0 0;overflow:hidden;aspect-ratio:1200/630;background:var(--tint)}
.program__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.program:hover .program__img img{transform:scale(1.04)}
.program__hero{margin:0 0 1.8rem}.program__hero img{width:100%;border-radius:var(--r);box-shadow:var(--sh)}
.prose ol,.prose ul{padding-left:1.4em}
.vitem__media--page{margin-bottom:2rem;box-shadow:var(--sh)}
.prose--video{font-size:1.08rem}
.vitem h2 a{color:var(--ink);text-decoration:none}.vitem h2 a:hover{color:var(--green)}
.i--flip{transform:scaleX(-1)}
.lead--bio{max-width:52rem}.lead--bio p{font-size:1rem;color:var(--txt);margin-bottom:.8em}

.yt-facade{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block}
.yt-facade__play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:1.6rem;transition:transform .15s,background .15s}
.yt-facade:hover .yt-facade__play{transform:scale(1.08);background:var(--green)}
.yt-facade__play svg{width:28px;height:28px;fill:currentColor}

/* article content imported from the old site */
.prose h5,.prose h6{font-size:1.2rem;margin:1.5em 0 .4em}
.prose .callout{background:#f3f7f6;border:1px solid var(--line);border-radius:10px;padding:.8rem 1.1rem}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}