/* Sections from the earlier mavie.uk (includes/sections.php): the studio and its
   principles, the blue route from first choice to handover, and the latest
   journal articles. Plain blocks; nothing here needs the page script. */
.ms-label{margin:0 0 18px!important;font:700 11px/1.2 var(--sans,Arial,sans-serif)!important;letter-spacing:.09em;text-transform:uppercase;color:#9b3c45!important}

/* A small studio, directly responsible */
.mk-section.ms-studio{background:#e8e6df}
.ms-studio-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.55fr);gap:clamp(40px,8vw,120px);align-items:end;margin-bottom:clamp(46px,6vw,78px)}
.ms-studio-head h2{max-width:13ch;font-size:clamp(40px,4.6vw,66px)}
.ms-studio-head p{max-width:47ch;margin:0 0 14px!important;color:#171915b3}
.ms-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid #171915;border-left:1px solid #171915}
.ms-principles>article{display:flex;flex-direction:column;min-height:270px;padding:clamp(24px,3vw,38px);border-right:1px solid #171915;border-bottom:1px solid #171915}
.ms-principles h3{max-width:12ch;margin:auto 0 16px!important;font-size:clamp(26px,2.4vw,34px)}
.ms-principles p:not(.ms-label){max-width:37ch;font-size:15px!important;line-height:1.6;color:#171915a6}

/* Clear from first choice to handover: the drawing runs the full width, the steps sit under its four parts. */
.mk-section.ms-journey{position:relative;isolation:isolate;overflow:hidden;background:#003098;color:#f8f2e8}
.ms-journey::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:28px 28px}
.ms-journey h2{max-width:none;font-size:clamp(40px,5.2vw,76px);text-align:center}
.ms-journey-art,.ms-journey-steps{position:relative;left:50%;width:min(100vw,1680px);max-width:none;translate:-50% 0}
.ms-journey-art{display:block;height:auto;margin:clamp(14px,2vw,30px) 0 0}
.ms-journey-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2%;padding:0 3%;text-align:center}
.ms-journey-steps h3{font-size:clamp(22px,1.9vw,28px)}
.ms-journey-steps p{max-width:28ch;margin:10px auto 0!important;font-size:15px!important;line-height:1.55;color:#f8f2e8c4}

/* From the journal: the newest article large on the left, the next two as a list beside it. */
.mk-section.ms-journal{background:#f5f0e7}
.ms-journal-list .wp-block-post-template{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);grid-template-rows:auto auto 1fr;column-gap:clamp(40px,5vw,72px);margin:0;padding:0;list-style:none}
.ms-journal-list .wp-block-post{margin:0}
.ms-journal-list .wp-block-post:first-child{grid-row:1/4}
.ms-journal-list .wp-block-post-featured-image{margin:0;overflow:hidden;border-radius:6px;background:#dad7d0}
.ms-journal-list .wp-block-post-featured-image img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;transition:scale .5s cubic-bezier(.2,.8,.2,1)}
.ms-journal-list .wp-block-post-featured-image a:hover img{scale:1.03}
.ms-journal-list .wp-block-post-date{margin-top:20px;font:700 11px/1.2 var(--sans,Arial,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:#11131090}
.ms-journal-list .wp-block-post-title{margin:10px 0 0;font-size:clamp(30px,3vw,42px);line-height:1.08}
.ms-journal-list .wp-block-post-title a{color:inherit;text-decoration:none}
.ms-journal-list .wp-block-post-title a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.ms-journal-list .wp-block-post-excerpt{margin-top:12px}
.ms-journal-list .wp-block-post-excerpt p{margin:0;max-width:52ch;font-size:16px;color:#171915b3}
.ms-journal-list .wp-block-post:not(:first-child){display:grid;grid-template-columns:clamp(98px,10vw,132px) minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:18px;padding:22px 0;border-bottom:1px solid #11131040}
.ms-journal-list .wp-block-post:nth-child(2){padding-top:0}
.ms-journal-list .wp-block-post:not(:first-child) .wp-block-post-featured-image{grid-row:1/3;align-self:center;border-radius:10px}
.ms-journal-list .wp-block-post:not(:first-child) .wp-block-post-featured-image img{aspect-ratio:4/3}
.ms-journal-list .wp-block-post:not(:first-child) .wp-block-post-date{margin-top:0;align-self:end}
.ms-journal-list .wp-block-post:not(:first-child) .wp-block-post-title{margin-top:6px;font-size:clamp(20px,1.6vw,24px);align-self:start}
.ms-journal-list .wp-block-post:not(:first-child) .wp-block-post-excerpt{display:none}

@media(max-width:760px){
 .ms-studio-head,.ms-principles{grid-template-columns:1fr}
 .ms-studio-head{gap:20px}
 .ms-principles>article{min-height:0}
 .ms-principles h3{margin-top:4px!important}
 .ms-journey-art{width:150vw;left:0;translate:-8% 0}
 .ms-journey-steps{width:auto;left:0;translate:none;grid-template-columns:1fr 1fr;gap:28px 18px;padding:0;margin-top:24px;text-align:left}
 .ms-journey-steps p{margin-left:0!important}
 .ms-journal-list .wp-block-post-template{grid-template-columns:1fr}
 .ms-journal-list .wp-block-post:first-child{grid-row:auto;margin-bottom:28px}
}

/* Projects so far: the work examples as a modest strip of four, not a showcase. */
.ms-projects .me-section-heading{margin-bottom:28px}
.ms-projects .me-section-heading h2{font-size:clamp(30px,3vw,42px)}
.ms-projects .me-project-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ms-projects .me-project-grid>.me-project,.ms-projects .me-project-grid>.me-project:first-child{grid-column:auto;display:block}
.ms-projects .me-project-image{overflow:hidden;border-radius:6px}
.ms-projects .me-project-image img{aspect-ratio:4/3;transition:scale .5s cubic-bezier(.2,.8,.2,1)}
.ms-projects .me-project-image:hover img{scale:1.03}
.ms-projects .me-project-grid>.me-project .me-project-copy{padding-top:14px}
.ms-projects .me-project-copy .me-project-status{margin-bottom:6px;font-size:13px}
.ms-projects .me-project-copy h3{font-size:24px}
.ms-projects .me-project-copy p:not(.me-project-status){margin:8px 0 12px;font-size:14px;line-height:1.55}
@media(max-width:960px){.ms-projects .me-project-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ms-projects .me-project-grid{gap:22px 16px}.ms-projects .me-project-copy h3{font-size:20px}.ms-projects .me-project-copy p:not(.me-project-status){display:none}}