:root{--navy:#2c5352;--ink:#293e3b;--gold:#eed9b9;--paper:#f6eedf;--muted:#56635b;--terracotta:#a4492d;--sand:#ddbea0;--teal:#73928b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #bb7605;outline-offset:6px}.skip{position:absolute;top:-100px;left:20px;background:white;padding:12px;z-index:10}.skip:focus{top:10px}header{padding:26px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d4d8d5;gap:24px}.brand{display:flex;gap:13px;align-items:center;font-weight:700;letter-spacing:1.8px;font-size:17px;line-height:1.35}.brand img{border-radius:50%;object-fit:cover}.brand-small{display:block;font-size:10px;letter-spacing:1.4px;margin-top:5px}nav{display:flex;gap:34px;font-size:14px}nav a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:7px}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:645px}.hero-copy{padding:76px 8% 50px 10%}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;margin:0 0 25px}.eyebrow span{display:inline-block;width:7px;height:7px;background:#b77620;margin-right:9px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-2.5px;line-height:1.06}h1{font-size:clamp(64px,6.7vw,108px);margin-bottom:27px}em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#a26822}h2{font-size:clamp(40px,4.1vw,64px);margin-bottom:26px}.intro{max-width:460px;color:var(--muted);font-size:18px}.hero-links{display:flex;gap:26px;align-items:center;margin-top:32px;flex-wrap:wrap}.button{padding:15px 24px;background:var(--navy);color:#fff;font-size:14px}.button span{font-size:11px;margin-left:24px}.button:hover{background:#254958}.text-link{font-size:14px}.hero-note{font-size:12px;color:#74807f;margin:42px 0 0}.hero-art{position:relative;background:var(--navy);min-height:610px;overflow:hidden}.family-frame{position:absolute;inset:0;overflow:hidden}.family-frame img{position:absolute;width:260%;max-width:none;height:170%;object-fit:fill;left:-4%;top:-30%}.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,#061e2bdb)}.image-caption{position:absolute;z-index:2;top:24px;left:25px;right:25px;display:flex;justify-content:space-between;gap:20px;color:white;font-size:10px;letter-spacing:1.3px}.art-label{position:absolute;bottom:35px;left:40px;z-index:2;color:white;font:48px/1.05 Georgia,serif}.art-label em{color:var(--gold)}.values-strip{display:flex;justify-content:space-evenly;align-items:center;gap:20px;background:var(--navy);color:var(--gold);padding:23px 5%;font-size:13px;letter-spacing:1.4px}.values-strip span:nth-child(even){font-size:18px}.section{padding:95px 6%}.vision{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}.vision-content>p{color:var(--muted);max-width:650px}.vision-content .lead{font-size:24px;line-height:1.4;color:var(--ink)}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px;border-top:1px solid #d0d5ce;padding-top:26px}.principles span{color:#9b6c2e;font-size:12px}h3{font-size:17px;margin:12px 0}.principles p{font-size:14px;color:var(--muted)}.film{background:var(--navy);color:white}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:34px}.section-heading h2{margin-bottom:0}.section-heading>p{max-width:320px;font-size:16px;color:var(--muted)}.film .eyebrow,.film em{color:var(--gold)}.film .section-heading>p{color:#bdd0d6}video{display:block;width:100%;max-height:680px;aspect-ratio:16/9;background:#081923}.film-caption{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1px;margin-top:18px}.film-caption a{text-decoration:underline;text-underline-offset:5px}.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:30px 24px}.gallery-item{padding:0;border:0;background:transparent;text-align:left;cursor:zoom-in;color:inherit;min-width:0;grid-column:span 2}.gallery-item img{width:100%;display:block;transition:filter .2s}.gallery-item:hover img{filter:brightness(1.07)}.gallery-item span{display:flex;justify-content:space-between;font-size:15px;padding-top:14px}.gallery-item b{font-weight:400}.portrait img{height:460px;object-fit:contain;background:#e6e0d6}.wide{grid-column:span 3}.wide img{aspect-ratio:1.8;object-fit:contain;background:#e6e0d6}.maker{background:#e5e9e5;display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}.maker-copy>p:last-child{max-width:420px;color:var(--muted)}.maker-images{display:grid;gap:24px}figure{margin:0}.maker-images img{display:block;width:100%;max-height:340px;object-fit:contain;background:#d7dad4}figcaption{font-size:13px;margin-top:8px;color:var(--muted)}.closing{text-align:center;padding:105px 20px}.closing h2{font-size:clamp(46px,5vw,76px)}footer{border-top:1px solid #d4d8d5;padding:25px 6%;display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:1px}dialog{border:0;padding:20px;background:var(--paper);max-width:95vw;max-height:95vh;width:1100px}dialog::backdrop{background:#04131deb}dialog img{display:block;max-width:100%;max-height:78vh;margin:auto;object-fit:contain}.dialog-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:16px}.dialog-bar p{margin:0}.dialog-bar button{border:1px solid #a7b5b8;background:transparent;padding:8px 16px;cursor:pointer}@media(min-width:1600px){body{max-width:1800px;margin:auto}}@media(max-width:900px){header{padding:20px 5%}.brand{font-size:14px}nav{gap:18px}.hero-copy{padding:60px 9%}.hero-art{min-height:570px}.hero h1{font-size:68px}.vision,.maker{gap:35px;grid-template-columns:1fr}.portrait img{height:350px}.section{padding:65px 5%}.hero-links{gap:18px}.hero-note{margin-top:25px}}@media(max-width:620px){header{flex-wrap:wrap;gap:18px}.brand-small{font-size:9px}nav{width:100%;justify-content:space-between;font-size:14px}.hero{grid-template-columns:1fr}.hero-copy{padding:44px 6%}.hero h1{font-size:76px}.hero-art{min-height:450px}.hero-note{margin-top:24px}.art-label{font-size:42px}.values-strip{font-size:10px;letter-spacing:.3px;gap:9px;padding:19px 4%}.values-strip span:nth-child(even){font-size:12px}.section-heading{display:block}.section-heading>p{margin:20px 0 0}.principles{grid-template-columns:1fr;gap:16px}.principles article{display:grid;grid-template-columns:24px 1fr;gap:0 12px}.principles h3{margin:0 0 6px}.principles p{grid-column:2;margin:0}.gallery{grid-template-columns:1fr 1fr;gap:25px 15px}.gallery-item{grid-column:span 1}.portrait img{height:300px}.gallery-item:nth-child(3){grid-column:span 2}.gallery-item:nth-child(3) img{height:400px}.wide{grid-column:span 2}.gallery-item span{font-size:14px}.film-caption{font-size:10px}.closing{padding:70px 6%}footer{flex-direction:column;gap:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Preserve the original photo's proportions inside its editorial crop. */
.hero-art{display:flex;flex-direction:column;justify-content:center;padding:72px 32px 42px}
.family-frame{position:relative;inset:auto;flex:none;width:100%;aspect-ratio:1000/390;overflow:hidden}
.family-frame img{width:166.1%;height:auto;object-fit:contain;left:-3%;top:-51.28%;max-width:none}
.hero-art:after{display:none}
.art-label{position:relative;left:auto;bottom:auto;margin-top:32px;font-size:clamp(36px,4.2vw,64px)}
.video-player{max-width:720px;margin-inline:auto}
.video-player video{width:100%;height:auto;max-height:none;object-fit:contain}
.video-toolbar{display:flex;justify-content:flex-end;margin-top:12px}
.fullscreen-button{color:var(--navy);background:var(--gold);border:0;padding:11px 18px;cursor:pointer;font-size:14px;font-weight:700}
.fullscreen-button:hover{background:#f5c777}
.video-player:fullscreen{max-width:none;width:100%;height:100%;background:#000;display:flex;flex-direction:column;justify-content:center;padding:20px}
.video-player:fullscreen video{min-height:0;max-height:calc(100vh - 80px);flex:1;aspect-ratio:auto}
.video-player:fullscreen .video-toolbar{flex:none}
.fullscreen-message{font-size:14px;color:#bdd0d6;margin:12px 0 0}
@media(max-width:620px){.hero-art{min-height:0;padding:75px 22px 35px}.art-label{font-size:42px}.image-caption{font-size:9px;left:22px;right:22px}.video-player{max-width:100%}}

.cyber{background:#e6ecea;border-top:1px solid #c5d2d0}
.cyber .section-heading>p{max-width:390px}
.cyber-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#c5d2d0;border:1px solid #c5d2d0}
.cyber-grid article{background:var(--paper);padding:30px}
.cyber-number{font-size:12px;letter-spacing:1.4px;color:#85591c;font-weight:700}
.cyber-grid h3{font-size:21px;line-height:1.35;margin:18px 0 14px}
.cyber-grid p{color:var(--muted);margin:0;font-size:16px}
.cyber-practice{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:32px;padding:35px;background:var(--navy);color:white}
.cyber-practice .eyebrow{color:var(--gold);margin-bottom:12px}
.cyber-practice h3{font:28px/1.3 Georgia,serif;margin:0 0 15px}
.cyber-practice p{margin:0;color:#d5e2e5}
.cyber-practice ol{margin:0;padding-left:24px}
.cyber-practice li{padding:0 0 12px 6px}
.cyber-practice strong{color:var(--gold)}
.cyber-sources{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;margin:25px 0 0}
.cyber-sources a{text-decoration:underline;text-underline-offset:4px}
nav{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:950px){header{flex-wrap:wrap}nav{gap:16px 24px}.cyber-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){nav{justify-content:flex-start}.cyber-grid,.cyber-practice{grid-template-columns:1fr}.cyber-grid article{padding:25px}.cyber-practice{padding:25px;gap:24px}}

.founder{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;background:var(--navy);color:var(--paper)}
.founder .eyebrow,.founder em{color:var(--gold)}
.founder blockquote{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(21px,2.1vw,29px);line-height:1.6}
.founder blockquote p:last-child{margin-bottom:0}
.founder-signature{margin:30px 0 0;padding-top:24px;border-top:1px solid #45606b;font-size:17px;letter-spacing:.2px}
.founder-signature span{display:block;color:#bdd0d6;font-size:14px;margin-top:3px}
@media(max-width:900px){.founder{grid-template-columns:1fr;gap:16px}}

/* Palette inspired by the supplied Mosaic Culture business card. */
em,.principles span,.cyber-number{color:var(--terracotta)}
.eyebrow span{background:var(--terracotta)}
header,footer,.principles{border-color:#d7c6ae}
a:focus-visible,button:focus-visible{outline-color:#ab5a38}
.button{background:var(--terracotta)}
.button:hover{background:#813920}
.hero-note{color:#58685f}
.hero-art,.founder{background:#a4492d}
.art-label,.founder{color:#fff8eb}
.art-label em,.founder .eyebrow,.founder em{color:#fff0d8}
.founder-signature{border-color:#dca789}
.founder-signature span{color:#fff0d8}
.film .section-heading>p,.fullscreen-message{color:#e0e8db}
.maker,.cyber{background:#e3e7d9}
.cyber,.cyber-grid{border-color:#becbbf}
.cyber-grid{background:#becbbf}
.cyber-practice p{color:#e4eadf}
.fullscreen-button:hover{background:#fff0d8}
.portrait img,.wide img,.maker-images img{background:#e7d8c3}
.dialog-bar button{border-color:#9aafa4}
.founder-card{margin:34px 0 0;max-width:560px;box-shadow:0 12px 25px #50261430}
.card-front{position:relative;aspect-ratio:653/396;overflow:hidden;background:var(--paper)}
.card-front img{position:absolute;width:235.222%;height:auto;max-width:none;left:-13.783%;top:-80.303%}
@media(max-width:900px){.founder-card{margin-bottom:25px}}

.card-back{position:relative;aspect-ratio:653/396;overflow:hidden;margin-top:18px}
.card-back>img{position:absolute;width:235.222%;height:auto;max-width:none;left:-121.286%;top:-80.303%}
.card-qr{position:absolute;left:0;bottom:.76%;z-index:2;width:clamp(82px,21vw,123px);display:flex;flex-direction:column;background:#fff9ed;color:var(--ink);text-align:center;font-size:clamp(8px,1.7vw,10px);font-weight:700;line-height:1.15;box-shadow:0 3px 10px #50261430}
.card-qr span{padding:4px 2px 3px}
.card-qr img{display:block;width:100%;height:auto;background:#fff;image-rendering:pixelated}
.card-qr:hover span{text-decoration:underline;text-underline-offset:2px}
.card-contact{display:flex;flex-wrap:wrap;gap:12px 24px;color:#fff8eb;font-size:14px;padding:14px 0}
.card-contact a{text-decoration:underline;text-underline-offset:4px}

.founder-quotes{margin-top:35px;padding-top:28px;border-top:1px solid #dca789}
.founder-quotes figure+figure{margin-top:28px}
.founder-quotes blockquote{font-size:clamp(23px,2.3vw,32px);font-style:italic;color:#fff0d8;line-height:1.5}
.founder-quotes figcaption{color:#fff8eb;font-size:15px;margin-top:10px}

/* Content sequence: mission, founder, learning, film, safety, tools, culture, contact. */
.hero h1{font-size:clamp(52px,5.4vw,82px)}
.hero .intro{font-size:17px}
.learning .principles{margin:0 0 38px;padding-top:24px}
.learning .principles h3{font-size:20px}
.learning .principles p{font-size:16px}
.learning-posters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.learning-posters .wide{grid-column:auto}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:60px;background:#e3e7d9;align-items:center}
.contact>div>p{max-width:440px;color:var(--muted)}
.contact address{font-style:normal;display:grid;gap:12px;overflow-wrap:anywhere}
.contact address a{text-decoration:underline;text-underline-offset:5px}
.contact .founder-card{margin:0;box-shadow:none}
.contact .card-contact{color:var(--ink)}
@media(max-width:900px){.contact{grid-template-columns:1fr;gap:35px}}
@media(max-width:620px){.learning-posters{grid-template-columns:1fr}.hero h1{font-size:56px}}

/* Audience-centered local preview. */
.hero h1{font-size:clamp(48px,5.1vw,78px);line-height:1.03;letter-spacing:-2px}
.hero-copy{padding-top:58px;padding-bottom:48px}
.hero .intro{font-size:20px;line-height:1.65;max-width:490px}
.hero .eyebrow{font-size:12px;line-height:1.7;letter-spacing:1.5px}
.hero-links .button{font-size:16px;padding:17px 22px}
.hero-links .button span{margin-left:10px}
.hero-note{font-size:14px}
.hero-art{justify-content:center;padding-top:75px}
.art-label{font-size:clamp(36px,4vw,60px);line-height:1.12}
.hero-art .image-caption{flex-wrap:wrap;font-size:11px}
.belong{background:#e3e7d9}
.audience-grid,.learning-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.audience-grid article{border-top:3px solid var(--terracotta);padding-top:25px}
.audience-grid article>span,.learning-benefits article>span{font-size:12px;font-weight:700;letter-spacing:1.2px;color:var(--terracotta)}
.audience-grid h3,.learning-benefits h3{font:30px/1.25 Georgia,serif;margin:18px 0}
.audience-grid p,.learning-benefits p{font-size:17px;color:var(--muted)}
.learning-benefits article{padding:28px;border:1px solid #d7c6ae;background:#fff9ed}
.learning-benefits a{font-size:16px;text-decoration:underline;text-underline-offset:5px}
.learning-concepts{margin-top:32px;border-block:1px solid #d7c6ae;padding:20px 0}
.learning-concepts summary{cursor:pointer;font-size:17px;font-weight:700;padding:6px}
.learning-concepts .learning-posters{margin-top:24px}
nav .nav-contact{background:var(--navy);color:#fff8eb;padding:10px 18px}
nav{align-items:center}
.contact address{font-size:19px}
.contact address a{padding-block:8px}
.contact .founder-card{max-width:430px;justify-self:center;width:100%}
@media(max-width:900px){.audience-grid,.learning-benefits{gap:20px}.audience-grid h3,.learning-benefits h3{font-size:25px}.learning-benefits article{padding:20px}}
@media(max-width:620px){.audience-grid,.learning-benefits{grid-template-columns:1fr;gap:25px}.hero h1{font-size:53px}.hero .intro{font-size:18px}.hero-copy{padding-top:38px}.hero-art .image-caption{font-size:10px}.hero-links{align-items:flex-start;flex-direction:column}.section{padding-block:60px}}

/* Visitor-controlled storyboard sequence. */
.story-animation{max-width:720px;margin:0 auto 40px;border:1px solid #eed9b970;padding:16px}
.story-scene[hidden]{display:none}
.story-scene-image{position:relative;overflow:hidden;width:100%;background:var(--navy)}
.story-scene-image img{position:absolute;max-width:none;height:auto}
.story-scene{animation:story-reveal .6s ease-out}
.story-scene figcaption{color:inherit;font-size:18px;margin-top:16px;min-height:60px}
.story-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.story-controls button{background:var(--paper);color:var(--ink);border:0;padding:12px 16px;cursor:pointer;min-height:44px}
#story-progress{text-align:center;font-size:14px;margin:12px 0 0}
@keyframes story-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.story-scene{animation:none}}

/* Mosaic AI Education is presented as an ENMOC initiative. */
.initiative{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:52px;align-items:center;background:#fff9ed}
.initiative-copy>p:not(.eyebrow){max-width:560px;color:var(--muted);font-size:17px}
.initiative-parent{padding:18px 20px;border-left:4px solid var(--terracotta);background:#e3e7d9;color:var(--ink)!important}
.initiative-parent strong{display:block;margin-top:4px}
.initiative-message{font-family:Georgia,'Times New Roman',serif;font-size:23px!important;line-height:1.4;color:var(--terracotta)!important}
.initiative-board{min-width:0}
.initiative-board img{display:block;width:100%;height:auto;border:1px solid #d7c6ae;box-shadow:0 16px 34px #50261425}
.initiative-board figcaption{margin-top:12px}
footer{align-items:flex-start;flex-wrap:wrap;background:var(--navy);color:#fff8eb;letter-spacing:.25px}
footer div{display:grid;gap:4px}
footer div:first-child span{color:#e0e8db}
.footer-contact{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 22px}
.footer-contact a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:900px){.initiative{grid-template-columns:1fr;gap:35px}}
@media(max-width:620px){.initiative-message{font-size:20px!important}.footer-contact{flex-direction:column}}

/* ENMOC Civic Connector — external national civic-information app. */
.civic-connector{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:clamp(40px,7vw,90px);align-items:center;background:#e3e7d9}
.civic-connector-copy>p:not(.eyebrow){max-width:610px;color:var(--muted);font-size:17px}
.civic-connector-card{padding:clamp(30px,5vw,52px);background:var(--navy);color:#fff8eb;border-left:10px solid var(--terracotta)}
.civic-connector-card .eyebrow{color:var(--gold);margin-bottom:18px}
.civic-connector-card h3{font:clamp(30px,3.6vw,48px)/1.1 Georgia,'Times New Roman',serif;margin:0 0 18px}
.civic-connector-card p{color:#e0e8db;margin-bottom:24px}
.civic-connector-card ul{display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;padding:20px 0;margin:0 0 26px;border-block:1px solid #ffffff35;font-size:13px;letter-spacing:.7px}
.civic-connector-card .button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:48px;background:var(--gold);color:var(--ink);font-weight:700}
.civic-connector-card .button span{margin-left:0}
.civic-connector-card .button:hover{background:#fff0d8}
.external-note{display:block;margin-top:14px;color:#c9d8d5;font-size:12px}
@media(max-width:900px){.civic-connector{grid-template-columns:1fr}}
@media(max-width:620px){
.civic-connector-card{padding:28px 24px}
.civic-connector-card ul{display:grid;gap:8px}
.civic-connector-card .button{width:100%}
header nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:10px 16px}
header nav a{padding-block:5px}
header nav .nav-contact{grid-column:1/-1;text-align:center}
}