/* LSA project page. Scoped to .lsap so it looks the same under any theme, front end and editor. */
.lsap{--ink:#172630;--copy:#2B3A42;--i7:#4A5A60;--i4:#A9ADAA;--hair:#D3D6D4;--p0:#F1F0EC;--p1:#E9E8E3;--acc:#EF6742;--acc7:#A8371A;--pad:clamp(20px,5vw,64px);--secy:clamp(64px,9vw,128px);--sans:"Archivo",system-ui,sans-serif;--serif:"Spectral",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--ease:cubic-bezier(.2,.6,.2,1);
  background:var(--p0);color:var(--copy);font:400 18px/1.72 var(--serif);-webkit-font-smoothing:antialiased;padding-bottom:0}
.lsap *,.lsap *::before,.lsap *::after{box-sizing:border-box}
.lsap p,.lsap h1,.lsap h2,.lsap h3,.lsap ol,.lsap figure{margin:0;padding:0}
.lsap .wp-block-group{margin-top:0;margin-bottom:0}
.lsap a{text-decoration:none;box-shadow:none}
.lsap img{max-width:100%;height:auto;border-radius:0}

/* full-bleed on the live page, whatever the theme's content width */
body.lsap-page{overflow-x:hidden}
body.lsap-page .lsap{width:100vw;max-width:100vw!important;position:relative;left:50%;margin:0 0 0 -50vw!important}
/* hide a theme's own title / featured image above the layout */
body.lsap-page .entry-header,body.lsap-page h1.entry-title,body.lsap-page .post-thumbnail,body.lsap-page .wp-block-post-title:not(.lsap *),body.lsap-page .wp-block-post-featured-image:not(.lsap *){display:none!important}

.lsap .lsap-wrap{max-width:1312px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* hero */
.lsap .lsap-hero{width:100%;height:clamp(320px,50vw,760px);overflow:hidden;background:var(--p1);margin:0}
.lsap .lsap-hero img{width:100%;height:100%;object-fit:cover;display:block}

/* head */
.lsap .lsap-head{padding-top:48px;display:flex;flex-direction:column;gap:24px}
.lsap .lsap-crumb,.lsap .lsap-crumb a{font:400 13px/1.7 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--i7)}
.lsap .lsap-crumb a:hover{color:var(--ink)}
.lsap .lsap-tb{display:grid;grid-template-columns:2.2fr 1.4fr 1.4fr 1fr 1fr .8fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.lsap .lsap-cell{background:#fff;padding:12px 16px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.lsap .lsap-k{font:400 10px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--i7)}
.lsap .lsap-tb h1,.lsap .lsap-tb .wp-block-post-title{font:600 clamp(24px,2.6vw,32px)/1.18 var(--sans);letter-spacing:-.02em;color:var(--ink);text-wrap:balance;margin:0;text-transform:none}
.lsap .lsap-v{font:500 16px/1.3 var(--sans);color:var(--ink);overflow-wrap:anywhere;text-transform:none;letter-spacing:0}
@media (max-width:900px){.lsap .lsap-tb{grid-template-columns:1fr 1fr}.lsap .lsap-tb>:nth-child(-n+2){grid-column:1/-1}}

/* phase track */
.lsap .lsap-phase{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.lsap .lsap-phase li{margin:0;background:#fff;color:var(--i7);padding:12px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;border:2px solid var(--hair)}
.lsap .lsap-phase__l{font:500 14px/1.2 var(--sans);color:var(--i7)}
.lsap .lsap-phase__n{font:400 11px/1.4 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--i7);white-space:nowrap}
.lsap .lsap-phase li.is-done{background:var(--ink);border-color:var(--ink)}
.lsap .lsap-phase li.is-done .lsap-phase__l{color:var(--p0);font-weight:600}
.lsap .lsap-phase li.is-done .lsap-phase__n{color:var(--p0);opacity:.72}
.lsap .lsap-phase li.is-current{border-color:var(--ink)}
.lsap .lsap-phase li.is-current .lsap-phase__l{color:var(--ink);font-weight:600}
.lsap .lsap-phase li.is-current .lsap-phase__n{color:var(--ink)}
@media (max-width:900px){.lsap .lsap-phase{grid-template-columns:1fr}}

/* sections */
.lsap .lsap-sec{padding-top:var(--secy)}
.lsap .lsap-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 24px;border-top:2px solid var(--ink);padding-top:32px}
@media (max-width:900px){.lsap .lsap-split{grid-template-columns:1fr}}
.lsap .lsap-h2,.lsap h2.lsap-h2{font:600 34px/1.18 var(--sans);letter-spacing:-.02em;color:var(--ink);text-transform:none}
.lsap .lsap-prose{display:flex;flex-direction:column;gap:24px;max-width:66ch}
.lsap .lsap-body,.lsap .lsap-prose p{font:400 18px/1.72 var(--serif);color:var(--copy)}
.lsap .lsap-tags{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px}
.lsap .lsap-tags a{display:inline-flex;align-items:center;font:400 13px/1.7 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:4px 12px;transition:background 140ms var(--ease),color 140ms var(--ease)}
.lsap .lsap-tags a:hover{background:var(--ink);color:var(--p0)}

/* updates header */
.lsap .lsap-log__head{font:400 13px/1.7 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--i7);padding-bottom:24px;border-bottom:2px solid var(--ink)}

/* updates as edited (editor view) */
.lsap .lsap-updates{display:flex;flex-direction:column;gap:32px;padding:48px 0}
.lsap .lsap-update{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 24px;align-items:start;border-top:1px solid var(--hair);padding-top:16px}
.lsap .lsap-update>*{grid-column:1;margin:0}
.lsap .lsap-update>figure{grid-column:2;grid-row:span 4}
.lsap .lsap-update>figure+figure{grid-row:auto}
.lsap .lsap-update figure img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--p1);display:block}
body.lsap-page .lsap .lsap-updates{display:none}

/* update text (shared by editor + viewer) */
.lsap .lsap-u-date{font:400 13px/1.7 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.lsap .lsap-u-title,.lsap h3.lsap-u-title{font:600 16px/1.5 var(--sans);color:var(--ink);text-wrap:pretty;text-transform:none;letter-spacing:0}
.lsap .lsap-u-body,.lsap .lsap-u-next{font:400 16px/1.6 var(--serif);color:var(--i7);text-wrap:pretty}
.lsap .lsap-u-next strong{font-family:var(--sans);font-weight:600}
.lsap .wp-element-caption,.lsap figcaption{font:400 12px/1.6 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--i7);margin-top:8px;text-align:left}

/* image viewer (live page) */
.lsap .lsap-viewer{display:flex;flex-wrap:wrap;gap:32px 24px;padding:48px 0;align-items:stretch;outline:0}
.lsap .lsap-v-img{flex:2 1 520px;min-width:0;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--p1)}
.lsap .lsap-v-slide{position:absolute;inset:0;visibility:hidden;opacity:0;transition:opacity 520ms var(--ease)}
.lsap .lsap-v-slide.is-active{visibility:visible;opacity:1}
.lsap .lsap-v-slide img{width:100%;height:100%;object-fit:cover;display:block}
.lsap .lsap-v-side{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--hair);padding-top:16px}
.lsap .lsap-v-text{display:flex;flex-direction:column;gap:12px}
.lsap .lsap-v-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding-top:16px}
.lsap .lsap-v-cap{font:400 12px/1.6 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--i7)}
.lsap .lsap-v-ctrl{display:flex;align-items:center;gap:8px}
.lsap .lsap-v-ctrl button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--hair);border-radius:0;color:var(--ink);cursor:pointer;padding:0;box-shadow:none;transition:background 140ms var(--ease)}
.lsap .lsap-v-ctrl button:hover{background:var(--acc);color:var(--ink)}
.lsap .lsap-v-ctrl .material-icons{font-size:20px}
.lsap .lsap-v-count{font:400 12px/1.6 var(--mono);letter-spacing:.02em;color:var(--i7);min-width:6ch;text-align:center}

/* previous / next */
.lsap .lsap-more{padding-top:var(--secy);padding-bottom:64px}
.lsap .lsap-prevnext{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));border-top:2px solid var(--ink);border-bottom:1px solid var(--hair)}
.lsap .lsap-prevnext a{display:flex;flex-direction:column;gap:8px;padding:24px 24px 24px 0;color:var(--ink);transition:background 140ms var(--ease)}
.lsap .lsap-prevnext a.is-next{align-items:flex-end;text-align:right;padding:24px 0 24px 24px}
.lsap .lsap-prevnext a:hover{background:var(--acc)}
.lsap .lsap-prevnext a:hover .lsap-d{color:var(--ink)}
.lsap .lsap-prevnext--empty{border-bottom:0}
.lsap .lsap-d{font:400 13px/1.7 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--i7)}
.lsap .lsap-h3{font:600 21px/1.33 var(--sans);color:var(--ink)}
.lsap .lsap-slash{padding-top:24px;display:flex}
.lsap .lsap-slash a{font:600 15px/1.2 var(--sans);color:var(--ink);border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color 140ms var(--ease)}
.lsap .lsap-slash a::before{content:"/ "}
.lsap .lsap-slash a:hover{border-bottom-color:var(--ink)}

/* start a project */
.lsap .lsap-cta{background:var(--p1)}
.lsap .lsap-cta__in{padding-top:96px;padding-bottom:96px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px 48px}
.lsap .lsap-cta h2{font:600 clamp(28px,3.2vw,40px)/1.18 var(--sans);letter-spacing:-.02em;color:var(--ink);margin:0;text-transform:none}
.lsap .lsap-btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;background:var(--acc);color:var(--ink);border:1px solid var(--acc);border-radius:0;padding:18px 28px;transition:background 140ms var(--ease),color 140ms var(--ease)}
.lsap .lsap-btn:hover{background:var(--acc7);border-color:var(--acc7);color:var(--p0)}
.lsap .lsap-btn .material-icons{font-size:18px}

/* editor: dynamic blocks shouldn't be clicked through */
.editor-styles-wrapper .lsap .lsap-prevnext a,.editor-styles-wrapper .lsap .lsap-btn,.editor-styles-wrapper .lsap .lsap-crumb a{pointer-events:none}