/* Visual direction inspired by Story of Stuff; all drawings and branding are original. */
@font-face{font-family:'Barlow Condensed';src:url('/assets/fonts/barlow-condensed-extrabold.ttf') format('truetype');font-weight:800;font-display:swap}
:root{--display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.015em}
.site-header{border-bottom:2px solid var(--text);min-height:85px}.brand{font-family:var(--display);font-weight:800;font-size:32px;text-transform:uppercase;letter-spacing:-.02em}.brand small{font-family:var(--sans);font-size:6px;letter-spacing:.12em}.brand-dot{color:var(--blue)}
.site-header nav{font-family:var(--display);font-size:23px;font-weight:800;gap:34px;text-transform:uppercase;line-height:1.1}.site-header nav a{color:var(--text);padding-block:13px}.site-header nav a[aria-current=page]{color:var(--blue-dark)}.site-header nav a::after{height:3px;bottom:5px;transform-origin:25% 50%}
.screen-intro h1{font-size:clamp(54px,min(7.6vw,11.4svh),101px);line-height:.94;letter-spacing:-.015em;color:var(--blue-dark)}.screen-intro h1>span{color:var(--blue-dark);position:relative}.project-screen h1>span::after{content:'';position:absolute;bottom:-4px;left:-2px;width:100%;height:4px;background:var(--blue);border-radius:50% 20% 45% 30%;transform:rotate(-1.5deg)}.screen-intro>.eyebrow{font-size:8px;letter-spacing:.1em}.intro-description{font:15px/1.75 var(--sans);max-width:400px;margin-top:25px}.project-more{font-size:10px;margin-top:23px}
.destination-card{border:1.6px solid var(--text);padding:25px 27px;background:white}.destination-card:hover{border-color:var(--text);box-shadow:5px 5px 0 var(--blue);transform:rotate(-.4deg)}.course-destination{background:var(--blue-light)}.destination-card h2{font-size:36px;line-height:1.05;letter-spacing:-.01em;color:var(--blue-dark);margin-top:10px}.destination-card>p{font:13px/1.7 var(--sans);max-width:calc(100% - 55px);margin-top:12px}.card-meta{font-size:8px;max-width:calc(100% - 65px);margin-top:15px;color:var(--text)}.card-top .eyebrow{font-size:7px}.card-arrow{font-size:26px;color:var(--text);transform:rotate(4deg)}.card-doodle{position:absolute;width:80px;height:72px;right:17px;bottom:19px;transform:rotate(5deg);transition:transform .3s;pointer-events:none}.destination-card:hover .card-doodle{transform:rotate(-3deg) translateY(-3px)}
.button{font-family:var(--display);font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.015em;border:1.5px solid var(--text);padding:10px 18px;line-height:1.2;box-shadow:3px 3px 0 var(--text)}.button:hover{box-shadow:5px 5px 0 var(--text);background:var(--blue-dark)}.button:disabled{box-shadow:none}.text-link{font-weight:750}.status-tag{border:1px solid var(--text);font-size:8px;padding:4px 8px}.course-card{border:1.6px solid var(--text);padding:27px}.course-card::after{height:4px}.course-card h2{font-size:40px;line-height:1;color:var(--blue-dark);margin-top:13px}.course-card-symbol{display:none}.course-card .card-top{height:27px}.course-card .course-sketch{position:absolute;right:24px;top:20px;width:82px;height:70px;transform:rotate(4deg)}.course-overview{margin-block:21px}.course-overview li{font-size:11px;padding-block:11px;border-color:#b9c7d0}.course-overview li>span{font-family:var(--display);font-weight:800;font-size:17px;line-height:1}.course-screen h1{font-size:clamp(43px,min(5.9vw,9svh),79px);line-height:.97}.course-screen .intro-description{font-size:15px;line-height:1.75}
.research-intro h1{font-size:clamp(56px,min(7vw,11svh),93px);line-height:.97}.research-intro .intro-description{font:18px/1.65 var(--sans)}.survey-card{border:1.6px solid var(--text);padding:27px}.survey-card h2{font-size:35px;line-height:1.05;letter-spacing:-.015em;color:var(--blue-dark)}.survey-card legend h2{font-size:31px;line-height:1.1;letter-spacing:-.01em}.survey-card legend{margin-bottom:18px}.survey-description{font:15px/1.75 var(--sans);margin-top:20px}.survey-privacy{border-left:3px solid var(--text);background:var(--blue-light);padding:14px;margin-block:21px}.survey-option{border:1.2px solid #acb9c2;padding:9px 12px}.survey-option:has(input:checked){border-color:var(--text);box-shadow:3px 0 0 var(--text) inset}.survey-options{gap:7px}.survey-actions .button{font-size:20px;padding:10px 17px;line-height:1.2}.survey-progress{font-size:9px}.survey-card progress{background:#d7e7ef;margin-block:13px 20px}.preview-note{font-size:9px}.survey-local-note{font-size:8px}.survey-finish h2{font-size:40px}.finish-mark{border:2px solid var(--text);border-radius:47% 52% 46% 49%;color:var(--text)}
.screen-footer{border-top:1px solid var(--text);font-size:7px;padding-block:12px}.screen-footer button{font-size:8px}.eyebrow{color:var(--text)}.blue-line{background:var(--text)}dialog{border:2px solid var(--text);box-shadow:7px 7px 0 #07517d40}dialog h2{font-size:38px;line-height:1.05}.format-steps h3{font-size:23px;line-height:1.2}.format-steps li>span{font-family:var(--display);font-size:19px;font-weight:800}.reading-body h2,.reading-body h3{font-family:var(--display)}.error-screen h1{font-size:70px;line-height:.95}.page-journey .journey-heading h1{font-family:var(--display);line-height:1.05}.page-journey .journey-heading h1,.page-journey .chapter-heading h2{letter-spacing:-.01em}.page-journey .chapter-heading h2{font-size:39px}.page-journey .journey-aside>h2{font-size:27px}
.survey-option{padding-block:8px}
.button:disabled,.button:disabled:hover{background:#eff4f7;color:#53687a;border-color:#c5d4dd;box-shadow:none}
@media(max-width:1050px){.site-header nav{font-size:22px;gap:27px}.brand{font-size:30px}.screen-intro h1{font-size:clamp(51px,min(8.1vw,11.1svh),84px)}.intro-description{font-size:14px;line-height:1.75}.course-screen h1{font-size:clamp(42px,min(6.2vw,9svh),65px)}.destination-card{padding:23px}.destination-card h2{font-size:34px}.destination-card>p{font-size:12px;max-width:calc(100% - 47px)}.card-doodle{width:70px;height:63px;right:14px;bottom:18px}.course-card h2{font-size:36px}.course-card{padding:25px}.survey-card{padding:22px}.survey-card h2{font-size:32px}.survey-card legend h2{font-size:29px}.research-intro h1{font-size:65px}.research-intro .intro-description{font-size:17px}}
@media(max-width:700px){.site-header{min-height:0;border-bottom-width:1.5px;padding-block:12px 10px;gap:12px}.brand{font-size:28px;line-height:1}.brand-symbol{width:29px;height:31px}.brand small{font-size:5px;letter-spacing:.12em;margin-top:5px}.site-header nav{font-size:20px;gap:0}.site-header nav a{padding-block:5px}.site-header nav a::after{bottom:0;height:2px}.screen-intro h1{font-size:clamp(43px,min(15vw,7.2svh),62px);line-height:.95}.screen-intro>.eyebrow{font-size:7px;margin-bottom:15px}.intro-description{font-size:13px;line-height:1.7;margin-top:19px}.project-more{font-size:9px;margin-top:14px}.destination-card{padding:16px 19px}.destination-card h2{font-size:30px;margin-top:7px;line-height:1}.destination-card>p{display:none}.destination-card .card-meta{font-size:7px;margin-top:10px;max-width:calc(100% - 48px)}.card-top .eyebrow{font-size:6px}.card-arrow{font-size:20px}.card-doodle{width:58px;height:52px;right:12px;bottom:12px}.destination-cards{gap:12px}.destination-card:hover{transform:none}.course-screen h1{font-size:clamp(39px,min(12vw,6.7svh),55px);line-height:.98}.course-screen .intro-description{font-size:13px;line-height:1.65}.course-card{padding:22px}.course-card h2{font-size:34px;line-height:1;margin-top:13px}.course-card .course-sketch{right:16px;top:16px;width:71px;height:61px}.course-card .card-top{height:24px}.course-overview{margin-block:18px}.course-overview li{font-size:10px;padding-block:10px}.course-overview li>span{font-size:16px}.research-intro h1{font-size:51px;line-height:1}.research-intro .intro-description{font-size:16px;line-height:1.55}.is-started .research-intro h1{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:0}.survey-card{padding:22px}.survey-card h2{font-size:31px;line-height:1.1}.survey-card legend h2{font-size:28px;line-height:1.1}.survey-description{font-size:13px;line-height:1.75;margin-top:17px}.survey-privacy{padding:13px;margin-block:18px}.survey-option{font-size:11px;padding:9px 11px}.survey-actions .button{font-size:19px;padding:9px 15px}.survey-finish h2{font-size:37px}.screen-footer{font-size:7px;padding-block:10px}.screen-footer button{font-size:7px}.error-screen h1{font-size:55px}dialog h2{font-size:34px}.format-steps h3{font-size:23px}}
@media(max-width:700px) and (max-height:720px){.site-header{padding-block:10px 8px;gap:10px}.brand{font-size:25px}.brand-symbol{width:27px;height:29px}.site-header nav{font-size:18px}.screen-intro h1{font-size:clamp(40px,7.1svh,50px)}.intro-description{font-size:12px;line-height:1.6;margin-top:14px}.screen-intro>.eyebrow{font-size:6px;margin-bottom:11px}.project-more{font-size:8px;margin-top:11px}.destination-card{padding:13px 16px}.destination-card h2{font-size:26px;margin-top:6px}.destination-card .card-meta{font-size:6px;margin-top:7px}.card-doodle{width:48px;height:44px;bottom:10px;right:10px}.card-top .eyebrow{font-size:5px}.card-arrow{font-size:17px}.course-screen h1{font-size:34px;line-height:1}.course-screen .screen-intro>.eyebrow{margin-bottom:8px}.course-screen .intro-description{display:none}.course-card{padding:17px}.course-card h2{font-size:30px;margin-top:10px}.course-card .card-top{height:20px}.course-card .course-sketch{width:59px;height:51px;right:13px;top:11px}.status-tag{font-size:7px}.course-overview{margin-block:13px}.course-overview li{font-size:9px;padding-block:8px}.course-overview li>span{font-size:14px}.course-card-actions{gap:12px}.course-card>.small-note{font-size:7px;margin-top:12px}.research-intro h1{font-size:43px}.research-intro .intro-description{font-size:14px;line-height:1.5}.research-intro>.eyebrow{margin-bottom:9px}.is-started .research-intro h1{font-size:27px}.survey-card{padding:18px}.survey-card h2{font-size:28px}.survey-card legend h2{font-size:25px;line-height:1.1}.survey-description{font-size:12px;line-height:1.7;margin-top:14px}.survey-privacy{margin-block:14px;padding:11px}.survey-card>.eyebrow{font-size:6px;margin-bottom:10px}.survey-option{font-size:10px;padding:8px 10px}.survey-actions .button{font-size:18px;padding:8px 13px}.survey-finish h2{font-size:32px}.screen-footer{padding-block:8px}}
@media(min-width:701px) and (max-height:650px){.site-header{min-height:65px}.brand{font-size:27px}.site-header nav{font-size:21px}.screen-intro h1{font-size:clamp(45px,10.3svh,67px);line-height:.95}.intro-description{font-size:13px;line-height:1.65;margin-top:17px}.project-more{font-size:9px;margin-top:16px}.destination-card{padding:18px 21px}.destination-card h2{font-size:30px}.destination-card>p{font-size:11px;margin-top:9px}.card-meta{font-size:7px;margin-top:10px}.card-doodle{width:65px;height:58px;right:12px;bottom:15px}.course-screen h1{font-size:clamp(38px,8.8svh,55px)}.course-card{padding:20px}.course-card h2{font-size:33px;margin-top:11px}.course-card .course-sketch{width:65px;height:56px;top:12px;right:18px}.course-card .card-top{height:23px}.course-overview{margin-block:16px}.course-overview li{font-size:10px;padding-block:8px}.course-card-actions{gap:12px}.course-card>.small-note{font-size:8px;margin-top:13px}.survey-card{padding:21px}.survey-card h2{font-size:30px}.survey-card legend h2{font-size:27px}.survey-description{font-size:13px;line-height:1.65;margin-top:17px}.survey-privacy{margin-block:17px;padding:13px}.survey-actions .button{font-size:19px;padding:9px 14px}.screen-footer{padding-block:10px}}
@media(min-width:701px) and (max-height:480px){.site-header{min-height:54px}.brand{font-size:25px}.site-header nav{font-size:19px}.screen-intro h1{font-size:40px}.intro-description{font-size:11px;line-height:1.5;margin-top:12px}.project-more{font-size:8px;margin-top:12px}.destination-card{padding:12px 16px}.destination-card h2{font-size:27px}.card-doodle{width:48px;height:43px;bottom:10px;right:10px}.card-meta{font-size:6px}.course-screen h1{font-size:36px}.course-card{padding:15px}.course-card h2{font-size:28px;margin-top:8px}.course-card .card-top{height:20px}.course-card .course-sketch{width:52px;height:46px;top:10px;right:12px}.course-overview{margin-block:12px}.course-overview li{padding-block:6px;font-size:9px}.course-card-actions{gap:9px}.survey-card{padding:16px}.survey-card h2{font-size:27px}.survey-card legend h2{font-size:24px}.survey-description{font-size:12px;margin-top:11px}.survey-privacy{padding:10px;margin-block:13px}.survey-actions .button{font-size:17px;padding:7px 12px}.survey-option{padding:6px 9px;font-size:9px}.screen-footer{padding-block:7px}.research-intro .intro-description{font-size:15px}}
@media(max-width:700px) and (max-height:720px){.research-screen:not(.is-started) .research-intro .intro-description,.research-screen:not(.is-started) .preview-note{display:none}.research-screen:not(.is-started) .research-intro h1{font-size:32px}.research-screen:not(.is-started) .survey-card>.eyebrow{display:none}.research-screen:not(.is-started) .survey-card h2{font-size:27px}.research-screen:not(.is-started) .survey-description{font-size:12px;margin-top:12px}.research-screen:not(.is-started) .survey-privacy{margin-block:13px}.research-screen.is-started{grid-template-rows:minmax(0,1fr);gap:0}.is-started .research-intro{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.is-started .survey-card{padding:16px}.survey-card legend h2{font-size:23px;line-height:1.05}.survey-options{gap:5px}.survey-option{padding-block:6px;font-size:10px;line-height:1.45}.survey-actions{margin-top:14px}.survey-actions .button{font-size:17px;padding:7px 12px}.is-started .survey-local-note{display:none}}
@media(max-width:700px) and (max-height:720px){.project-screen .project-more{display:none}.project-screen h1{font-size:38px}.project-screen .card-top{height:0}.project-screen .card-top .eyebrow,.project-screen .card-arrow{display:none}.project-screen .destination-card h2{font-size:22px;margin-top:0;max-width:calc(100% - 43px)}.project-screen .destination-card{padding-block:13px}.project-screen .card-doodle{width:43px;height:39px;right:10px;bottom:10px}.course-screen .screen-intro>.eyebrow{display:none}.course-screen h1{font-size:30px}.course-card h2{font-size:28px}.course-card{padding:16px}}
@media(max-width:700px) and (max-height:720px){.is-started .survey-card{padding:15px}}