/* The example roadmap (generated by _studio/kit/site_mise.py) */
.rmap *{box-sizing:border-box;margin:0;padding:0}
.rmap{width:1440px;background:#FFFFFF;color:#000000;font-family:Inter,sans-serif;font-weight:300;padding:64px 56px 56px}
.rmap .m{font-family:"Chivo Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.rmap .hair{color:#7A7670}
.rmap .mh{display:grid;grid-template-columns:1fr 560px;gap:56px;align-items:end;padding-bottom:40px}
.rmap .code{font-family:"Chivo Mono",monospace;font-size:15px;letter-spacing:.12em;margin-bottom:6px}
.rmap h1{font-family:Archivo,Inter,sans-serif;font-weight:900;font-stretch:62%;font-size:150px;line-height:.82;letter-spacing:-.01em;margin-left:-4px}
.rmap .series{font-size:24px;line-height:1.25;letter-spacing:-.01em;margin-bottom:18px}
.rmap .lede{font-size:17px;line-height:1.5}
.rmap .gloss{font-size:12.5px;color:#7A7670;margin-top:16px;padding-top:10px;border-top:.5px solid #000000}
.rmap .ex{display:inline-block;border:1px solid #000000;padding:6px 10px 5px;margin-bottom:22px}
.rmap section{border-top:.5px solid #000000;padding-top:12px;margin-top:56px}
.rmap .fh{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-bottom:22px}
.rmap .fh .t{font-size:15px;line-height:1.5;max-width:620px}
.rmap .brief{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.rmap .brief div p:first-child{margin-bottom:8px}
.rmap .brief b{font-weight:400;font-size:26px;letter-spacing:-.02em;display:block;line-height:1.15}
.rmap .finds{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:28px}
.rmap .finds ol{list-style:none;counter-reset:f}
.rmap .finds li{font-size:15px;line-height:1.5;padding:10px 0;border-bottom:.5px solid #E2E1DD;display:grid;grid-template-columns:28px 1fr}
.rmap .finds li::before{counter-increment:f;content:counter(f,decimal-leading-zero);font-family:"Chivo Mono",monospace;font-size:10px;color:#7A7670;padding-top:4px}
.rmap .three{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.rmap .kcd{list-style:none;margin-top:10px}
.rmap .kcd li{font-size:14.5px;line-height:1.5;padding:10px 0;border-bottom:.5px solid #E2E1DD}
.rmap .kcd b{font-weight:500}
.rmap table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.45}
.rmap th{font-family:"Chivo Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;text-align:left;font-weight:400;padding:8px 12px 8px 0;border-bottom:.5px solid #000000}
.rmap td{padding:11px 12px 11px 0;border-bottom:.5px solid #E2E1DD;vertical-align:top}
.rmap td.el{font-size:15px;font-weight:400;width:200px}
.rmap .reg{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.rmap .reg th{font-family:"Chivo Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:left;font-weight:400;padding:0 16px 10px 0;border-bottom:.5px solid #000;vertical-align:bottom}
.rmap .reg th:last-child{color:#23395B}
.rmap .reg td{padding:16px 18px 16px 0;border-bottom:.5px solid #E2E1DD;vertical-align:top}
.rmap .reg .no{font-family:"Chivo Mono",monospace;font-size:12px;width:34px;padding-top:19px}
.rmap .reg .el{font-size:19px;font-weight:400;width:190px;letter-spacing:-.005em}
.rmap .reg .hy{font-size:17px;width:330px}
.rmap .reg .stt{width:160px;white-space:nowrap}
.rmap .reg .bar{display:inline-flex;gap:3px;vertical-align:middle;margin-right:8px}
.rmap .reg .bar i{display:block;width:13px;height:9px;border:.8px solid #000}
.rmap .reg .bar i.on{background:#000}
.rmap .reg .sl{font-family:"Chivo Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.rmap .reg .stop{color:#23395B;font-size:17px;border-top:1.5px solid #23395B}
.rmap .cost{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.rmap .big{font-size:64px;letter-spacing:-.04em;line-height:1}
.rmap .note{font-size:13px;line-height:1.5;color:#7A7670;margin-top:12px;max-width:680px}
.rmap .src{list-style:none;font-size:12px;line-height:1.5;color:#7A7670;columns:2;column-gap:56px}
.rmap .src li{break-inside:avoid;padding:5px 0;display:grid;grid-template-columns:28px 1fr}
.rmap .src span{font-family:"Chivo Mono",monospace;font-size:10px}
.rmap .src a{color:#7A7670}
.rmap sup{font-family:"Chivo Mono",monospace;font-size:9px;color:#7A7670;margin-left:1px}
.rmap .mf{display:flex;justify-content:space-between;margin-top:64px;padding-top:12px;border-top:.5px solid #000000}
.rmap .brief{max-width:none;margin-top:0;font-size:inherit}
.rmap{width:auto;max-width:1440px;margin:0 auto;background:#fff}
.rmap .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rmap .wide{min-width:880px}
.rmap svg{max-width:100%;height:auto}
.rmap h2.m{font-weight:400;margin:0}
.rmap .rm-pdf{margin-top:40px}
.rmap .m{font-size:12px}
.rmap .lede{font-size:18px}
.rmap .fh{display:block;margin-bottom:26px}
.rmap .fh .t{font-size:22px;line-height:1.35;letter-spacing:-.01em;max-width:880px;margin-top:10px;color:#000}
.rmap table{font-size:15px}
.rmap th{font-size:12px}
.rmap .note{font-size:15px;color:#000}
.rmap .finds li,.rmap .kcd li{font-size:16px}
.rmap .reg{min-width:1040px}
.mise-back{display:inline-block;margin-bottom:28px}
@media (max-width:1100px){
  .rmap{padding-left:32px;padding-right:32px}
  .rmap .mh,.rmap .fh,.rmap .cost,.rmap .finds{grid-template-columns:1fr!important;gap:20px}
  .rmap .brief{grid-template-columns:1fr 1fr}
  .rmap .three{grid-template-columns:1fr}
  .rmap h1{font-size:clamp(56px,13vw,112px)}
  .rmap .src{columns:1}
}
.rmap .swipe{display:none}
@media (max-width:900px){
  .rmap .swipe{display:block;margin-top:8px;color:#7A7670}
  .rmap .reg td{width:auto!important}
  .rmap .reg{min-width:0;width:100%}
  .rmap .reg,.rmap .reg tbody,.rmap .reg tr,.rmap .reg td{display:block}
  .rmap .reg thead,.rmap .reg th,.rmap .reg tr:has(th){display:none}
  .rmap .reg tr{border-top:.5px solid #000;padding:12px 0 16px}
  .rmap .reg td{padding:2px 0;border:0}
  .rmap .reg td.no{display:inline;padding:0 10px 0 0}
  .rmap .reg td.el{display:inline;font-size:18px}
  .rmap .reg td[data-l]::before{content:attr(data-l);display:block;margin-top:10px;font:400 11px/1.4 "Chivo Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:#7A7670}
}
@media (max-width:640px){
  .rmap{padding:40px 16px 40px}
  .rmap .brief{grid-template-columns:1fr}
  .rmap .big{font-size:48px}
}

/* final cut, 18 Oct 2026 */
.mise h2.m,.rmap h2.m{max-width:none;line-height:1.45}
.mise,.rmap{padding-left:var(--pad);padding-right:var(--pad)}
.mise .hero,.mise .atmo{margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad))}
.mise .field{margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));padding-left:var(--pad);padding-right:var(--pad)}
.mise-ix h1{margin-left:-.03em}
@media (min-width:901px){.mise-ix .writing{grid-template-columns:100px 1fr;padding-left:32px}}
.mise .targets{max-width:calc((100% - 80px)/3*2 + 40px)}
@media (max-width:1100px){.mise .targets{max-width:none}}
@media (max-width:719px){
  .mise .hero-sc{margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad))}
  .rmap .mf{flex-direction:column;gap:4px}
  .mise .reg td[data-l]::before,.mise .till-t td[data-l]::before,.rmap .reg td[data-l]::before{font-size:12px}
}
@media (max-width:1100px){
  .mise .wide,.rmap .wide{min-width:1328px}
  .mise .swipe,.rmap .swipe{display:block;margin-top:8px}
  .mise .scroll:has(svg.swirl) .wide{min-width:0}
  .mise .scroll:has(svg.swirl)+.swipe{display:none}
}
@media (min-width:901px) and (max-width:1100px){.mise .reg,.rmap .reg,.mise .till-t{min-width:0}.mise .reg .hy,.rmap .reg .hy{width:auto}}
@media (min-width:901px) and (max-width:1279px){.mise-ix .row{grid-template-columns:100px minmax(0,1fr) 90px minmax(0,1.3fr) 200px}}
@media (min-width:901px){.mise .kit{width:auto;max-width:max-content;grid-template-columns:repeat(4,minmax(0,300px))}}
.mise-next .nn{text-wrap:balance}
.rmap .src span,.rmap .finds li::before{font-size:12px}
.rmap .gloss{font-size:14px;color:#000}

@media (max-width:1279px){.mise .mg dl div{grid-template-columns:minmax(0,1fr);gap:2px}}   /* 21 Oct: the figures box spilled ("the ground floo") at 1024 */
@media (min-width:901px) and (max-width:1279px){.mise-ix .n{font-size:min(52px,calc((100vw - 560px)/11))}}   /* MOTHERSHIP ran into its label at 901 to 1100 */
.mise .scroll:not([tabindex])+.swipe{display:none}   /* home.js drops the tab stop from drawings that fit; they don't need the hint */
@media (min-width:1441px){.mise .field{margin-inline:calc(-1*var(--edge));padding-inline:var(--edge)}.mise .atmo{margin-inline:calc(-1*var(--edge))}}   /* 21 Oct: the colour field and the wide image run to the screen edge past 1440 */

/* 18 Oct: the problem, quoted big, and what you can use tomorrow */
.mise .pain{padding:4px 0 8px;margin-bottom:40px}
.mise .pain .pk,.mise .take .pk{font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 18px}
.mise .pq{margin:0;border-left:12px solid var(--sc);padding:2px 0 2px 26px}
.mise .pq p{font:300 clamp(30px,3.7vw,54px)/1.1 Inter,sans-serif;letter-spacing:-.028em;max-width:21em;text-wrap:balance;margin:0 0 16px}
.mise .pq cite{display:block;font-style:normal;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.mise .pq cite a,.mise .pt a{color:#000}
.mise .pt{font-size:20px;line-height:1.45;max-width:40em;margin:28px 0 0;text-wrap:pretty}
.mise .take{margin:36px 0 8px;padding-top:14px;border-top:1px solid #000;max-width:56em}
.mise .take p:last-child{font-size:20px;line-height:1.45;margin:0;text-wrap:pretty}
@media (max-width:719px){.mise .pq{padding-left:16px;border-left-width:8px}.mise .pt,.mise .take p:last-child{font-size:18px}}

/* 18 Oct, panel (Willey, Hara): one italic on the site, the Fig. caption only; same black; the "Fig. n." label stays sans. Loaded by the study pages only. */
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/eb-garamond-400i-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/eb-garamond-400i-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
.mise .wp-cap{font-family:'EB Garamond',Georgia,serif;font-style:italic;font-weight:400;font-size:18px;line-height:1.35;color:#000}
.mise .wp-cap b{font-family:Inter,sans-serif;font-style:normal;font-size:15px;font-weight:500}
@media (max-width:640px){.mise .wp-cap{font-size:17px;line-height:1.4}}

/* studies audit, 18 Oct: a three-way switch, the index leads with the studies on a phone */
.mise-next{grid-template-columns:repeat(3,minmax(0,1fr))}
.mise-next>*{display:flex;flex-direction:column;gap:8px;color:#000;text-decoration:none;border-left:12px solid var(--sc);padding-left:16px;text-align:left!important}
.mise-next [aria-current] .nn,.mise-next [aria-current] .m{color:#595959}
.mise-next a:hover .nn{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
@media (max-width:719px){.mise-next{grid-template-columns:minmax(0,1fr);row-gap:20px}.mise .cn,.mise .co{font-size:12px}}
@media (max-width:900px){.mise-ix{display:flex;flex-direction:column}.mise-ix .mh{display:contents}.mise-ix .rows{order:1}.mise-ix .mh>div:last-child{order:2;margin-top:40px}.mise-ix .mise-bridge,.mise-ix .writing,.mise-ix .foot{order:3}}

/* 18 Oct: the suite turntable under the fixtures plate */
.mise .turn{margin:40px 0 0;display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:28px;align-items:end}
.mise .turn video{display:block;width:100%;height:auto;aspect-ratio:600/560;border:1px solid #000;padding:3px;background:#fff;box-sizing:border-box;outline:.5px solid #000;outline-offset:-4px}
.mise .turn figcaption{max-width:34ch}
@media (max-width:719px){.mise .turn{grid-template-columns:minmax(0,1fr);gap:12px}}

/* 18 Oct: the Studies headline breaks after "can do" on wide screens; on phones "the phone can't" stays together and fits */
@media (max-width:719px){.mise-ix h1{font-size:min(48px,12vw)}}

/* 18 Oct (James: "should that paragraph widen so the fold moves up"): the index intro keeps its 65-character measure
   and runs as two columns across the full width, the theory and then the studies; the fold rises about 135 px */
@media (min-width:1024px){.mise-ix .ix-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}
.mise-ix .ix-cols .lede{max-width:34em;margin:0}}

/* 18 Oct, James: the colour bar hangs in the margin, so the row's words and sketch sit on the column and on the rule's ends */
.mise-ix .row{border-left:0;padding-left:0;padding-right:0;box-shadow:none;position:relative}
.mise-ix .row::before{content:"";position:absolute;left:-20px;top:-.5px;bottom:-.5px;width:8px;background:var(--sc)}
@media (max-width:719px){.mise-ix .row::before{left:-14px;width:6px}}
/* the switch between the studies: four across, each bar hung outside its words (18 Oct) */
.mise-next{column-gap:40px}
.mise-next>*{border-left:0!important;padding-left:0!important;position:relative}
.mise-next>*::before{content:"";position:absolute;left:-20px;top:0;bottom:0;width:8px;background:var(--sc)}
@media (min-width:1024px){.mise-next{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:720px) and (max-width:1023px){.mise-next{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}}
@media (max-width:719px){.mise-next>*::before{left:-14px;width:6px}}
/* the alignment audit, 18 Oct: a plate and its margin notes split on the grid (four columns and one); cut-outs never spill past the plate on small phones */
@media (min-width:1024px){.mise .pw{display:grid;grid-template-columns:calc((100% - 4 * var(--g,24px)) / 5 * 4 + 3 * var(--g,24px)) minmax(0,1fr);column-gap:var(--g,24px)}}
.mise .eplate{overflow-x:clip}
.mise .sketch img{height:auto}
/* 19 Oct: on a phone the two intro paragraphs keep a gap between them */
@media (max-width:1023px){.mise-ix .ix-cols .lede+.lede{margin-top:16px}}
/* the alignment audit, 18 Oct: the intro columns split on the grid's gutter; sketches and the turntable end on a column line */
@media (min-width:1024px){.mise-ix .ix-cols{column-gap:var(--g,24px)}}
@media (min-width:720px){.mise .sketch img{width:calc((100% - 4 * var(--g,24px)) / 5 * 3 + 2 * var(--g,24px));min-width:0;height:auto}.mise .turn{grid-template-columns:calc((100% - 4 * var(--g,24px)) / 5 * 2 + var(--g,24px)) minmax(0,1fr);column-gap:var(--g,24px)}}

/* 20 Oct: the research quote beside each study's theory: the problem quote's treatment, at reading size */
.mise .rq{margin:6px 0 40px;border-left:12px solid var(--sc);padding:2px 0 2px 26px}
.mise .rq p{font:300 clamp(22px,2.2vw,30px)/1.22 Inter,sans-serif;letter-spacing:-.018em;max-width:30em;text-wrap:pretty;margin:0 0 14px}
.mise .rq cite{display:block;font-style:normal;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.mise .rq cite a{color:#000}
@media (max-width:719px){.mise .rq{padding-left:16px;border-left-width:8px}}

/* 21 Oct, the grid audit, round 2: the intro's two paragraphs start on column lines 1 and 3, not on halves of the measure */
@media (min-width:1024px){.mise-ix .ix-cols{grid-template-columns:repeat(5,minmax(0,1fr))}.mise-ix .ix-cols .lede{grid-column:1/3}.mise-ix .ix-cols .lede+.lede{grid-column:3/-1}}
/* at the full measure the study rows sit on the five columns: code and name over 1-2, scale and line over 3-4, the sketch in 5.
   Below 1440 the longest name (Garment Passport, 405 px) no longer fits two columns, so the words keep their own tracks there,
   but the sketch still takes exactly column 5 */
@media (min-width:901px) and (max-width:1279px){.mise-ix .row{grid-template-columns:100px minmax(0,1fr) 90px minmax(0,1.3fr) calc((100% - 4 * var(--g,24px)) / 5);column-gap:var(--g,24px)}}
@media (min-width:1280px) and (max-width:1439px){.mise-ix .row{grid-template-columns:100px 410px 90px minmax(0,1fr) calc((100% - 4 * var(--g,24px)) / 5);column-gap:var(--g,24px)}}
/* each study's title: the box steps out by a capital stem's side bearing (Archivo Black at 62% width, about .039 em), so the
   stem sits on the text edge at every size; round capitals (G, C, S) overshoot it by a hair, as they should. Was a fixed -4 px */
.mise .field h1{margin-left:-.039em}
.mise .field .dek-sub{margin-top:10px}   /* 23 Oct: Mothership's subline under its claim */
@media (min-width:1440px){.mise-ix .row{grid-template-columns:80px minmax(0,1fr) 80px minmax(0,1fr) calc((100% - 4 * var(--g,24px)) / 5);column-gap:var(--g,24px)}}