/* =========================================================
   Folded Logic Layout Architecture (Ma)
   An Origami-Inspired Layout Architecture
   Copyright © 2026 Peter Johnson
   Below the Fold Deferred CSS
   ========================================================= */

/* ================================
  03.2 Kumi (layout assemblies)
   ================================ */

/********************* Core Competencies *********************/
#core-competencies {background:#efefef;}
#core-competencies .pocket {padding:calc(var(--ken) * 4) 0 calc(var(--ken) * 4) 0;}
.speaking-collaboration-text {padding:0 0 calc(var(--ken) * 4) 0;}
.competencies-text {padding: 20px 20px 20px 20px;margin:0px 10px 0px 10px;color:#ffffff;text-align:center;background:#002042;border-radius:10px;box-shadow:0px 0px 1px 1px rgba(0,0,0,.2);}
.milestones-items .competencies-text {margin-bottom:20px;}
.competencies-text h2, .competencies-text h3 {padding: 0 0 15px 0;font-size: 34px;line-height:38px;color:#FEBA3F;}
.competencies-text p {padding: 5px 0px;font-size: 21px;line-height:24px;}
@media only screen and (min-width : 960px) and (max-width : 1639px) {
.competencies-text {padding: 1.21vw 1.21vw 1.21vw 1.21vw;}
.competencies-text h2, .competencies-text h3 {padding-bottom:0.91vw;font-size: 2.07vw;line-height:2.31vw;}
.competencies-text p {padding: 0.30vw 0vw;font-size: 1.28vw;line-height:1.46vw;}

}

/********************* How I Can Help *********************/
#how-i-can-help {background: #EFEFEF;background: linear-gradient(180deg, rgba(239, 239, 239, 1) 0%, rgba(255, 255, 255, 1) 100%);}
#how-i-can-help .pocket {padding:calc(var(--ken) * 4) 0 calc(var(--ken) * 4) 0;}
.help {align-items:center;}
.help-art, .help-art img {width:100%;}
.help-text {padding:20px 0px 20px 0px;color:#000000;font-size: 21px;line-height:32px;}
.help-text h2 {padding: 0px 0px 20px 0px;font-size: 50px;line-height:54px;color:#002042;}
.help-text p {padding: 13px 0px;}
.help-text .button {margin-top: calc(var(--ken) * 2);}

@media only screen and (min-width : 960px) and (max-width : 1639px) {
.help-text {padding:1.21vw 0vw 1.21vw 0vw;font-size: 1.28vw;line-height: 1.95vw;}
.help-text h2 {padding: 0vw 0vw 1.21vw 0vw;font-size: 3.04vw;line-height:3.29vw;}
.help-text p {padding: 0.79vw 0vw;}
.help-text .bullet li {--ken:.609vw;}
}

/********************* Personal Quote *********************/
#personal-quote.face {background:#002042;}
#personal-quote .spine {max-width:1180px;padding:0;}
#personal-quote .pocket {padding:0;}
#personal-quote .core {height: 400px;}
.quote-art {height:100%;}
#personal-quote h2 {position:absolute;top:0;bottom:0;left:35%;width:60%;height:100%;margin:auto 0;padding: 0px;font-size: 50px;line-height:54px;color:#fff;}
@media only screen and (min-width : 1999px) {
#personal-quote .spine {max-width:59vw;}
#personal-quote .core {height: 20vw;}
#personal-quote h2 {font-size: 2.5vw;line-height:2.7vw;}

}
@media only screen and (min-width : 640px) and (max-width : 1219px) {
#personal-quote .core {height: 32.78vw;}
#personal-quote h2 {font-size: 4.09vw;line-height:4.42vw;}
}

/********************* Featured Media *********************/
.featured-media.face {background:#002042;}
.featured-media .spine {max-width:1100px;padding:0;}
.featured-media .pocket {padding: 0 0 calc(var(--ken) * 4) 0;}
.featured-media-art img {width:100%;}
.featured-media-art {width:100%;}
.featured-media-article figcaption {padding: 30px calc(var(--ken) * 4) 0px calc(var(--ken) * 4);}
.featured-media-article figcaption strong.title {padding:0px 0 20px 0px;font-size: 40px;line-height:44px;}
.featured-media-article figcaption strong.detail {}
@media only screen and (min-width : 960px) and (max-width : 1139px) {
.featured-media-article figcaption strong.title {padding:0vw 0 1.75vw 0vw;font-size: 3.50vw;line-height:3.85vw;}
}


/********************* Methodology *********************/
#methodology {}

/********************* Simple Quote *********************/
.personal-quote-simple {background:#002042;}

/********************* Midwest Matters *********************/
#midwest-matters {background:#efefef;}

/********************* Student Voice *********************/
#student-voice {background:#efefef;}

/********************* In Practice *********************/
#in-practice {background:#efefef;}
.in-practice-kasane {background:#efefef;opacity:.9;}

/********************* Contact Kumi *********************/
#contact.face {background:#002042;}
#contact .pocket {padding:8% 0 8% 0;}
.kakoi-contact {max-width:700px;padding: calc(var(--ken) * 4) 0 calc(var(--ken) * 4) 0;}
.contact-text {font-size: 21px;line-height:32px;}
.contact-text.contact-page {padding-bottom:40px;}
.contact-text h2 {padding: 0px 0px 20px 0px;font-size: 50px;line-height:54px;}
.contact-text p {padding: 13px 0px;}
.contact-text .button {margin-top: calc(var(--ken) * 2);}
@media only screen and (min-width : 960px) and (max-width : 1639px) {
.kakoi-contact {max-width:42.68vw;}
.contact-text {font-size: 1.28vw;line-height:1.95vw;}
.contact-text h2 {padding: 0vw 0vw 1.21vw 0vw;font-size: 3.04vw;line-height:3.29vw;}
.contact-text p {padding: 0.79vw 0vw;}
.contact-text .bullet li {--ken:.609vw;}
}

/********************* Footer Kumi *********************/
footer.face {background:#002042;}
footer .spine {max-width: 800px;}
footer .pocket {padding: 20px 0px;}
footer .core {}
footer p {padding: 5px 0px 5px 0px;line-height:18px;font-size: 14px;color: #ffffff;;text-align:center;}
footer p a {color: #ffffff;}
footer p a:hover {color: #eeeeee;}
footer p.footer-menu {padding: var(--ken) 0;}
footer p.footer-menu a {padding: var(--ken);line-height:24px;}

/* =========================================================
   06. COMPONENTS
   ========================================================= */
/****** Summary/Details ******/
summary {padding:calc(var(--ken) * 2) 0;font-size:var(--size-h2);line-height:var(--line-h2);color:var(--color-ink-strong);font-weight:700;cursor:pointer;list-style:none;position:relative;}
summary::-webkit-details-marker {display:none;}
summary::marker {display:none;}
summary::after{content:"▸";position:absolute;right:0;top:50%;transform:translateY(-50%);transition:transform .25s ease;font-weight:var(--weight-heavy);}
details[open] summary::after{transform:translateY(-50%) rotate(90deg);}
.summary-content{overflow:hidden;height:0;transition:height .35s ease;}
details[open] .summary-content{height:auto;}

/****** Ougi (Slide Accordion) ******/
.ougi-fold {padding:calc(var(--ken) * 4) 0;}
.ougi{scroll-margin-top:var(--scroll-offset);}
.ougi-header{padding:calc(var(--ken) * 2) 0;font-size:var(--size-h2);line-height:var(--line-h2);width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;font-weight:700;background:none;border:none;border-bottom:var(--border-thin) solid var(--color-line-soft);cursor:pointer;}
.ougi-header:focus-visible{outline:var(--focus-ring-width)solid var(--color-focus);outline-offset:var(--focus-ring-offset);}
.ougi-header[aria-expanded="true"] {border-bottom:none;}
.ougi-header[aria-expanded="true"] .ougi-arrow{transform:rotate(90deg);}
.ougi-arrow{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.ougi-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s cubic-bezier(.4,0,.2,1);content-visibility:auto;}
.ougi-panel.open{grid-template-rows:1fr;}
.ougi-inner{overflow:hidden;padding:0 0 var(--ken) 0;border-bottom:var(--border-thin) solid var(--color-line-soft);opacity:0;transform:translateY(-8px);transition:opacity .18s ease .08s,transform .18s ease .08s;}
.ougi-panel.open .ougi-inner{opacity:1;transform:translateY(0);}

/****** Jump ******/
.jump {margin: calc(var(--ken) * 2) 0;text-align: right;font-size: 14px;line-height: 26px;}
.jump a {display: inline-flex;align-items: center;gap: calc(var(--ken) / 2);padding-left:calc(var(--ken) * 2);color: var(--color-ink-strong);text-decoration: none;font-weight: 500;border-top: var(--border-base) solid var(--color-line);}
.jump a::after {content: "▴";font-size: 24px;width:15px;line-height: 1;transform: translateY(-1px);transition: transform .25s ease;}
.jump a:hover::after {transform: translateY(-4px);} 




/* ==================================================================================================================
   RESPONSIVE (Tablet and Mobile)
   ================================================================================================================== */
@media only screen and (max-width : 959px) {
/* === 03. MAIN ARCHITECTURE (KUMI/KATA) === */	
/*** Core Competencies ***/
#core-competencies .pocket {padding:0;}
.speaking-collaboration-text {padding:0 0 calc(var(--ken) * 2) 0;}
.competencies {--col-gap: 10px;}
.competencies-text {padding:10px 10px 10px 10px;}
.competencies-text h2, .competencies-text h3 {padding-bottom:8px;font-size:18px;line-height:22px;}
.competencies-text p {padding:2px 0px;font-size:14px;line-height:16px;}

/*** How I Can Help ***/
.col-wrap.help {align-items:stretch;}
.help-art {width: 100%;height: 100%;position: absolute;inset: 0;pointer-events: none;}
.help-art img {width: 100%;height: 100%;object-fit: cover;object-position: center center;}
.help-text {padding:10px 0px 10px 0px;font-size:14px;line-height:16px;}
.help-text h2 {padding:0px 0px 10px 0px;font-size:28px;line-height:32px;}
.help-text p {padding:7px 0px;}
.help-text ul.bullet li::before {top: calc(var(--ken) * 1.5);}
/*** More Cans ***/
.featured-media-article figcaption strong.title {padding:0px 0 16px 0px;font-size:28px;line-height:32px;}

/*** Contact ***/
.kakoi-contact {max-width:400px;}
.contact-text {font-size:14px;line-height:16px;}
.contact-text h2 {padding:0px 0px 10px 0px;font-size:28px;line-height:32px;}
.contact-text p {padding:7px 0px;}
.contact-text ul.bullet li::before {top: calc(var(--ken) * 1.5);}
}

/* ==================================================================================================================
   RESPONSIVE (Mobile)
   ================================================================================================================== */
@media only screen and (max-width : 639px) {
/* === 03. MAIN ARCHITECTURE (KUMI/KATA) === */	
/*** Core Competencies/Speaking Collaboration ***/
#core-competencies .spine {padding:0px 5px;}
.competencies {--col-gap: 0;}
.competencies .col-1-3.first {flex: 0 0 100%;margin-bottom:20px;}
.competencies .col-1-3 {flex: 0 0 50%;}
.competencies-text {margin:0px 5px 0px 5px;}
#speaking-collaboration .competencies-text {margin:0px 5px 10px 5px;}
.competencies-text h2, .competencies-text h3 {padding-bottom:5px;font-size:16px;line-height:20px;}

/*** How I Can Help ***/
.help-art {width:calc(100% + 40px);margin-left:-20px;margin-bottom:20px;position:relative;}
.help-text {padding:30px 0px 10px 0px;}
.help-text h2 {padding:0px 0px 5px 0px;font-size:24px;line-height:28px;}
.help-text ul.bullet li::before {top: calc(var(--ken) * 1.8);}
/*** Personal Quote ***/
#personal-quote .core {height: 32.78vw;}
#personal-quote h2 {font-size: 5.09vw;line-height:5.42vw;}

/*** More Cans ***/
.featured-media-article figcaption strong.title {padding:0px 0 10px 0px;font-size:24px;line-height:28px;}

/*** Contact ***/
.contact-text h2 {padding:0px 0px 5px 0px;font-size:24px;line-height:28px;}
.contact-text ul.bullet li::before {top: calc(var(--ken) * 1.8);}



}