/* Experimental behavior is loaded only by /mobile-lab/. */
#listing-dialog{padding:0;border:0;color:var(--ink);background:#fff;max-width:none;max-height:none}
#listing-dialog::backdrop{background:#102c4970}
.lab-toolbar{position:sticky;top:0;z-index:1;display:flex;align-items:center;padding:12px 20px;padding-top:max(12px,env(safe-area-inset-top));background:#fff;border-bottom:1px solid var(--line)}
.lab-back{min-height:44px;background:none;border:0;font-weight:600;padding:8px 0;color:var(--ink)}
@media(max-width:850px){
 body[data-mobile-lab] main{display:block}
 body[data-mobile-lab] .browser{border-right:0}
 body[data-mobile-lab] #list{max-height:none;overflow:visible}
 body[data-mobile-lab] main>#detail{display:none}
 body[data-mobile-lab].lab-detail-open{position:fixed;left:0;right:0;overflow:hidden}
 #listing-dialog[open]{display:block;position:fixed;inset:0;width:100%;height:100vh;height:100dvh;margin:0;overflow-y:auto;overscroll-behavior:contain;border-radius:0}
 #listing-dialog #detail{height:auto;overflow:visible;padding-bottom:max(28px,env(safe-area-inset-bottom));overflow-wrap:anywhere}
 #listing-dialog .detail-grid{grid-template-columns:1fr}
}

/* Suppress Safari's autofocus ring after touch; retain explicit keyboard focus. */
#listing-dialog[data-input="pointer"] .lab-back:focus{outline:none}
#listing-dialog[data-input="keyboard"] .lab-back:focus{outline:3px solid var(--teal);outline-offset:3px}

/* Mobile lab: stronger editorial tagline and a clearly visible envelope. */
@media(max-width:850px){
 body[data-mobile-lab] header>p.header-description{font-size:clamp(15.3px,2.38vw,18.7px);line-height:1.4;font-weight:600}
 body[data-mobile-lab] nav .mail-card .mail-stamp{display:block;width:76px;height:62px;right:18px;top:18px;opacity:.28;z-index:0;transform:rotate(12deg);color:#254d43}
 body[data-mobile-lab] .mail-card h2{padding-right:88px;min-height:52px}
 body[data-mobile-lab] .mail-card h2,body[data-mobile-lab] .mail-card p,body[data-mobile-lab] .mail-card button{position:relative;z-index:1}
}
@media(max-width:850px){body[data-mobile-lab] .mail-stamp .menu-icon{display:block}}

/* Use the site's sans-serif voice for the lab tagline. */
body[data-mobile-lab] header>p.header-description{font-family:'IBM Plex Sans',sans-serif;font-style:normal}

body[data-mobile-lab] header .edition #week .week-dates{font-family:'IBM Plex Sans',sans-serif;font-style:normal}
@media(max-width:850px){body[data-mobile-lab] header .edition #week .week-dates{font-size:clamp(15.3px,2.38vw,18.7px);line-height:1.4;font-weight:600}}

/* Lead with the service promise; keep it second in mobile reading order. */
header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;min-height:112px}
body[data-mobile-lab] header>p.header-description{font-family:'IBM Plex Sans',sans-serif;font-style:normal;font-size:clamp(18px,1.65vw,24px);font-weight:600;line-height:1.3;letter-spacing:-.35px;color:var(--ink);white-space:normal;max-width:680px;border-left:2px solid #b5adee;padding-left:24px}
@media(min-width:851px){.shell{height:calc(100vh - 112px)}}
@media(min-width:851px) and (max-width:1100px){header{grid-template-columns:1fr auto;gap:14px 24px}header>p.header-description{grid-column:1;grid-row:2}header>.edition{grid-column:2;grid-row:1 / 3}.shell{height:calc(100vh - 140px)}}
@media(max-width:850px){
 header{grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 20px}
 header .brand{grid-column:1;grid-row:1}
 body[data-mobile-lab] header>p.header-description{grid-column:1;grid-row:2;font-size:clamp(20px,3.5vw,25px);line-height:1.3;padding:0;border:0;max-width:640px;letter-spacing:-.3px}
 header>.edition{grid-column:1;grid-row:3;justify-self:start;text-align:left}
}

/* Mobile navigation follows the curator, signup and contact blocks. */
@media(max-width:850px){
 .shell nav>button[data-view]{order:4}
 .shell nav>.portfolio-banner-row{order:1}
 .shell nav>.mail-card{order:2}
 .shell nav>.nav-contact{order:3}
}

/* Separate the promotional blocks from the edition and navigation. */
@media(max-width:850px){
 .shell nav>.portfolio-banner-row{border-top:0;padding-top:0}
 .shell nav>.nav-contact{border-bottom:1px solid #c7bfe8;padding-bottom:18px;margin-bottom:6px}
 .shell nav>.edition{order:4;flex-basis:100%;margin:0;text-align:left;padding:4px 14px 8px}
 .shell nav>button[data-view]{order:5}
 nav .edition #week{font-size:16px;font-weight:600}
 nav .edition #week .week-label{font-family:'Source Serif 4',serif;font-weight:700}
 nav .edition #week .week-dates{font-family:'IBM Plex Sans',sans-serif;font-size:clamp(15.3px,2.38vw,18.7px);font-weight:600;font-style:normal;color:var(--muted)}
}

/* Increase the wordmark by ten percent at each existing size. */
header .brand{font-size:clamp(26.4px,2.75vw,39.6px)}
@media(max-width:600px){header .brand{font-size:30.8px}}

#edita-dialog{padding:0;border:0;color:var(--ink);background:#fbf8ef;max-width:none;max-height:none}
#edita-dialog::backdrop{background:#102c4970}
@media(max-width:850px){
 #edita-dialog[open]{display:block;position:fixed;inset:0;width:100%;height:100vh;height:100dvh;margin:0;overflow-y:auto;overscroll-behavior:contain;border-radius:0}
 #edita-dialog main{display:block;height:auto;min-height:0}
 #edita-dialog .browser{height:auto;overflow:visible}
 #edita-dialog .lab-toolbar{background:#fbf8ef}
 #edita-dialog .edita-disclaimer{padding-bottom:max(20px,env(safe-area-inset-bottom))}
}

/* Touch autofocus stays quiet; keyboard focus remains visible. */
#edita-dialog[data-input="pointer"] .lab-back:focus{outline:none}
#edita-dialog[data-input="keyboard"] .lab-back:focus{outline:3px solid var(--teal);outline-offset:3px}

/* Edition context belongs between the desk title and listing counts. */
.intro>.edition{margin:7px 0 5px;text-align:left}
.intro .edition #week{font-size:14px}
.intro .edition .week-label{font-family:'Source Serif 4',serif;font-weight:700}
.intro .edition .week-dates{font-family:'IBM Plex Sans',sans-serif;font-size:14px;font-weight:600;font-style:normal;color:var(--muted)}

/* Keep the desktop service description beside the wordmark. */
@media(min-width:851px){
 header{grid-template-columns:auto minmax(0,1fr);gap:24px}
 header .brand{grid-column:1;grid-row:1}
 body[data-mobile-lab] header>p.header-description{grid-column:2;grid-row:1;max-width:none;white-space:normal;font-size:clamp(18px,1.5vw,24px)}
}
@media(min-width:1280px){body[data-mobile-lab] header>p.header-description{white-space:nowrap}}